jQuery slideViewer

Gian Mingati Feb 17, 2009

General

A lightweight gallery with smooth animation. Titles can be added to each picture by using the ALT attribute. Easy to style.

Notes

Created by: Gian Carlo Mingati
Web Site: http://www.gcmingati.net/wordpress/

Source Code

Paste this source code into the designated areas.

External file

Download the external files using the URL below:

Download the images here

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

/*preload classes*/
.svw {
  width: 50px;
  height: 20px;
  background: #fff;
}

.svw ul {position: relative; left: -999em;}

/*core classes*/
.stripViewer {
  position: relative;
  overflow: hidden;
  border: 2px solid #FFD227; /* #ff0000; */
  margin: 0 0 1px 0;
}

.stripViewer ul { /* this is your UL of images */
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top: 0;
  width: 1%;
  list-style-type: none;
}
.stripViewer ul li {
  float:left;
}

.stripTransmitter {
  overflow: auto;
  width: 1%;
}

.stripTransmitter ul {
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
}

.stripTransmitter ul li{
  width: 20px;
  float:left;
  margin: 0 1px 1px 0;
}

.stripTransmitter a{
  font: bold 10px Verdana, Arial;
  text-align: center;
  line-height: 22px;
  background: #FFD227;
  color: #000;
  text-decoration: none;
  display: block;
}

.stripTransmitter a:hover, a.current{
  background: #fff;
  color: #FFD227;
}

/*tooltips formatting*/
#tooltip {
  background: #fff;
  color: #000;
  opacity: 0.85;
  border: 5px solid #8d8dfd;
}

#tooltip h3 {
  font: normal 10px Verdana;
  margin: 3px;
  padding: 6px 2px;
  border: 0;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
<script type="text/javascript" src="jquery.slideviewer.1.1.js"></script>

$(window).bind("load", function() {
    $("div#mygalone").slideView({toolTip: true})
});

Body

Paste this code into the BODY section of your HTML document


<div id="mygalone" class="svw">
<ul>
  <li><img src="pic1.gif" alt="Beautiful mountains"></li>
  <li><img src="pic2.gif" alt="The scenic lake"></li>
  <li><img src="pic3.gif" alt="A bit of Winter around here"></li>
  <li><img src="pic4.gif" alt="Ah, Spring is back"></li>
  <li><img src="pic5.gif" alt="A view of the street from the air"></li>
  <li><img src="pic6.gif" alt="A storm is heading this way"></li>
  <li><img src="pic7.gif" alt="An aerial view of the city"></li>
  <li><img src="pic8.gif" alt="One of the ruins"></li>
</ul>
</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details