Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Omni Image View, Fade, and/or Slide - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../lightbox2.04a/css/lightbox.css" type="text/css" media="screen">
<script src="../lightbox2.04a/js/prototype.js" type="text/javascript"></script>
<script src="../lightbox2.04a/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../lightbox2.04a/js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
/* All Styles Optional */
body {
color: #ddd;
background-color: #000;
margin: 0;
padding: 0;
}
.content {
margin: 15px 10px;
}
#container {
margin-top: 1em;
}
img {
vertical-align: middle;
border: none;
}
.vacthumb img {
border: 1px solid #000;
height: 56px;
width: 75px;
padding: 1ex;
margin-bottom: 1ex;
}
.vacActive img {
border: 1px solid #ccc;
}
input.vacActive {
border: 2px solid #f9a;
}
#vac {
margin: 1em;
height: 425px;
width: 400px;
float: left;
position: relative;
background-color:#666;
}
.vacCount {
position: absolute;
font: normal 80% sans-serif;
top: -1.5em;
left: -1ex;
}
.controls {
float:left;
margin-left: 1em;
}
</style>
<script type="text/javascript" src="viewfadeslide.js">
/* Omni Image View, Fade, and/or Slide Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
<script type="text/javascript">
viewfadeslide.config = { //place comma after each entry except the last
//Use true or false or {Object} containing boolean values for separate primary load areas
enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
makeTitle : true, //Make title attribute for enlarged image from name attribute of trigger link?
hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
disableOnClick : true, //Disable default onclick for mouseover triggers?
populateWithFirst : true, //Fire first link in load area group(s) onload?
enableCount : true,
//Use true or false
enableTransition : true, //Enable fade transition in browsers capable of it?
//Use true or false or {Object} containing boolean values or tag name for separate primary load areas
writeNumberButtons : false, //Also requires element with id of load_area_idNum ex: <div id="loadareaNum"></div>
writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>
useButtons : true, //Allows choosing individual Control buttons by numbers, ex: useButtons : {loadarea: {4 : true, 5 : true}},
//Works off array: 0 = 'Next', 1 = 'Previous', 2 = 'First', 3 = 'Last', 4 = 'Run', 5 = 'Stop' - otherwise just set to true
enableSlideShow : true, //Enable slide show(s) use - true/false or {load_area : delay}
startSlideShow : false,
swapControlVals : true, //true false or object with boolean values - should running/paused state affect buttons?
//Below three (only valid if slide show running) may use 'pause', 'stop' or 'none', boolean objects or global values
slideHoverBehavior : 'stop', //What happens onmouseover of larger images if slide show is running
slideTriggerBehavior : 'pause', //What happens triggers when are activated if slide show is running
slideNumberButtonsBehavior : 'stop', //What happens when numbered buttons are clicked if slide show is running
//Set to true only if using lightbox 2.04a add on and lightbox groups
enableLightBoxGroups : true //Enable writing out all lightbox group links (lightbox[groupname]) links to a display none div? (true/false only)
}; //No comma After last entry in the above (viewfadeslide.config)
</script>
</head>
<body>
<div class="content">
<div id="container"></div>
<div class="vacthumb"><a class="" href="images/image_01.jpg" name="Caribbean Princess" rel="vfsimage::mouseover" rev="vac::images/01_lrg.jpg::lightbox[vp]::Caribbean Princess"><img src="images/image_01_tbn.jpg" alt=""></a><a class="" href="images/image_02.jpg" name="Heidi & Heather" rel="vfsimage::mouseover" rev="vac::images/02_lrg.jpg::lightbox[vp]::Heidi & Heather"><img src="images/image_02_tbn.jpg" alt=""></a><a class="" href="images/image_03.jpg" name="Corn Dog (Waldo)" rel="vfsimage::mouseover" rev="vac::images/03_lrg.jpg::lightbox[vp]::Corn Dog (Waldo)"><img src="images/image_03_tbn.jpg" alt=""></a><a class="" href="images/image_04.jpg" name="Tree House" rel="vfsimage::mouseover" rev="vac::images/04_lrg.jpg::lightbox[vp]::Tree House"><img src="images/image_04_tbn.jpg" alt=""></a><a class="" href="images/image_05.jpg" name="Freedom Pond" rel="vfsimage::mouseover" rev="vac::images/05_lrg.jpg::lightbox[vp]::Freedom Pond"><img src="images/image_05_tbn.jpg" alt=""></a><a class="" href="images/image_06.jpg" name="Pigs" rel="vfsimage::mouseover" rev="vac::images/06_lrg.jpg::lightbox[vp]::Pigs"><img src="images/image_06_tbn.jpg" alt=""></a><a class="" href="images/image_07.jpg" name="Margaret Todd (rigging)" rel="vfsimage::mouseover" rev="vac::images/07_lrg.jpg::lightbox[vp]::Margaret Todd (rigging)"><img src="images/image_07_tbn.jpg" alt=""></a><a class="" href="images/image_08.jpg" name="Margaret Todd (starboard bow)" rel="vfsimage::mouseover" rev="vac::images/08_lrg.jpg::lightbox[vp]::Margaret Todd (starboard bow)"><img src="images/image_08_tbn.jpg" alt=""></a><a class="" href="images/image_09.jpg" name="Figaro" rel="vfsimage::mouseover" rev="vac::images/09_lrg.jpg::lightbox[vp]::Figaro"><img src="images/image_09_tbn.jpg" alt=""></a><a class="vacActive" href="images/image_10.jpg" name="Rock Sculpture" rel="vfsimage::mouseover" rev="vac::images/10_lrg.jpg::lightbox[vp]::Rock Sculpture"><img src="images/image_10_tbn.jpg" alt=""></a></div>
<div id="vac"></div>
</div>
</body>
</html>
Demo:
http://home.comcast.net/~jscheuer1/s...vac_simple.htm
Image Thumbnail Viewer II - Popup images?
Reply With Quote
Originally Posted by jscheuer1
Bookmarks