I am looking for slide show script as in following example.
Do we have in dynamicdrive.com I could not find it.
http://juverman.narod.ru/slideGaller....html#example6
CSS Codes
Junior Coders
Slide show script
I am looking for slide show script as in following example.
Do we have in dynamicdrive.com I could not find it.
http://juverman.narod.ru/slideGaller....html#example6
Administrator
The link you posted doesn't work (404 error; the page doesn't exist).
Here's a list of a pile of slideshows on dd.
Junior Coders
Here is the link
http://juverman.narod.ru/slideGallery/Demo/index.html
I this
I want to make some changes if possible.
1. put link in images
2. remove navigation buttons
3. description background to transparent instead of black.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideGallery 1.3.1 for Mootools 1.3+</title>
<link media="all" type="text/css" rel="stylesheet" href="../Assets/css/all.css" />
<script type="text/javascript" src="../Assets/js/mootools-core-1.4.5-full-nocompat-yc.js"></script>
<script type="text/javascript" src="../Source/slideGallery.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
/* Example 6 */
var thumns = $$(".thumbs li a");
var gallery6 = new fadeGallery($$(".gallery6"), {
speed: 500,
autoplay: true,
duration: 2000,
onStart: function() {
thumns.removeClass("active");
thumns[this.current].addClass("active");
},
onPlay: function() { this.fireEvent("start"); }
});
thumns.each(function(el, i) {
el.addEvent("click", function() {
thumns.removeClass("active");
this.addClass("active");
gallery6.current = i;
gallery6.play(true);
return false;
});
});
var buttonPanel = gallery6.holder.getElement(".control");
gallery6.holder.addEvent("mouseenter", function() {
buttonPanel.tween("top", 0);
gallery6.prev.tween("left", 10);
gallery6.next.tween("right", 10);
});
gallery6.holder.addEvent("mouseleave", function() {
buttonPanel.tween("top", -40);
gallery6.prev.tween("left", -50);
gallery6.next.tween("right", -50);
});
/* Examples panel */
var panel = true;
$$(".toggler").addEvent("click", function() {
if(panel) {
this.set("text", "show").getNext().setStyle("display", "none");
panel = false;
}
else {
this.set("text", "hide").getNext().setStyle("display", "block");
panel = true;
}
return false;
});
});
</script>
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="../Assets/css/lt7.css" media="screen"/><![endif]-->
</head>
<body>
<div class="gallery gallery6 gallery-fade">
<ul class="thumbs">
<li><a href="http://www.************"><img src="../Assets/images/img1.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img2.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img3.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img4.jpg" alt="image" width="120" height="90" /><span> </span></a></li>
</ul>
<div class="holder">
<ul>
<li>
<img src="../Assets/images/img1.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 1</div>
</li>
<li>
<img src="../Assets/images/img2.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 2</div>
</li>
<li>
<img src="../Assets/images/img3.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 3</div>
</li>
<li>
<img src="../Assets/images/img4.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 4</div>
</li>
<li>
<img src="../Assets/images/img5.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 5</div>
</li>
<li>
<img src="../Assets/images/img6.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 6</div>
</li>
<li>
<img src="../Assets/images/img7.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 7</div>
</li>
<li>
<img src="../Assets/images/img8.jpg" alt="image" width="480" height="360" />
<div class="title">Image description 8</div>
</li>
</ul>
<div class="control">
<a href="#" class="start">play</a>
<a href="#" class="stop">pause</a>
</div>
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
<ul class="thumbs">
<li><a href="javascript:;"><img src="../Assets/images/img5.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img6.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img7.jpg" alt="image" width="120" height="89" /><span> </span></a></li>
<li><a href="javascript:;"><img src="../Assets/images/img8.jpg" alt="image" width="120" height="90" /><span> </span></a></li>
</ul>
</div>
</div>
<div id="footer">
<div class="hold">
</div>
</div>
</body>
</html>
Last edited by vitof123; 08-10-2012 at 02:12 AM.
Posting Permissions
Reply With Quote
Bookmarks