Response title
This is preview!
Randomizing images with fadeout on photostack code
Answered
- Need more info
- Working on it
- Answered
in Developing jQuery Plugins
•
12 years ago
Hi all, I am a complete newbie with JQuery and recently for my website I had pictures stacking on top of each other. Users have to click on the images to change the images. This is fine i do want to keep this but I want to also have the images changing at random automatically. I have attached the files below I know that i need to use something called speed : 600, autoplay : true but I dont know how to implement this please could someone help thanks.
Link to the site is www.morgancreare.co.uk/loxwood
This is my stack.js
This is my php file:
Link to the site is www.morgancreare.co.uk/loxwood
This is my stack.js
- $(document).ready(function() {
- $imgs = $("#photo_stack img");
$imgCount = $imgs.length;
$curr_index = 0;
$imgs.last().addClass('current');
for(var i=1; i<=$imgs.length; i++) {
$random_deg = (Math.round((Math.random()*3)+1))
$suff = '';
if (i % 2 == 0)
$suff = 'neg';
$imgs.eq(i-1).addClass('deg' + $random_deg + $suff);
}
$("#photo_stack")
.delegate('img', 'click', function() {
$this = $(this);
if ($this.hasClass('current')) {
$zi = $this.css('zIndex') - $imgCount;
$this.addClass('animate');
setTimeout(function() { $this.css('zIndex', $zi); }, 200);
setTimeout(function() { $this.removeClass('animate'); }, 1000);
$this.removeClass('current');
if ($this.index() == 0) {
$imgs.last().addClass('current');
} else {
$imgs.eq($this.index()-1).addClass('current');
}
}
})
.delegate('img', 'mouseenter', function() {
if ($(this).hasClass('current')) {
$(this).addClass('hover');
}
})
.delegate('img', 'mouseleave', function() {
$(this).removeClass('hover');
});;
});
This is my php file:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Loxwood Window Company - Gloucestershire & Hampshire</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="stack.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="photo_stack">
<img id = "photo6" src ="images/jquery_slide0.jpg" alt="" />
<img id = "photo2" src="images/jquery_slide1.jpg" alt="" />
<img id = "photo3" src="images/jquery_slide2.jpg" alt="" />
<img id = "photo4" src="images/jquery_slide3.jpg" alt="" />
<img id = "photo5" src="images/jquery_slide4.jpg" alt="" />
<img id = "photo1" src="images/jquery_slide5.jpg" alt="" />
</div>
</div>
</body>
</html>
1