Image Effects : jQuery slideViewer / The JavaScript Source

Browse Doc JS's Tips!

Promotions

Free Announcements

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/
Posted: February 17, 2009

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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos