Guruman2 Posted April 23, 2013 Share Posted April 23, 2013 Hi masters. I want to create multiple slide show in one page ,i have created on and is working well but i want to have like three difference slide show and i try to use the same code of the first with dfrent image but it did not work at all. pls i need ur guidiance. Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted April 23, 2013 Share Posted April 23, 2013 What code are you using? Link to comment Share on other sites More sharing options...
Guruman2 Posted April 25, 2013 Author Share Posted April 25, 2013 (edited) <!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><title></title> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript"> $(document).ready(function() { //Execute the slideShow, set 20 seconds for each imagesslideShow(4000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0$('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity)$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show'); //Get the caption of the first image from REL attribute and display it$('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));$('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt')); //Display the caption$('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshowvar timer = setInterval('gallery()',speed); //pause the slideshow on mouse over$('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); }); } function gallery() { //if no IMGs have the show class, grab the first imagevar current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //trying to avoid speed issueif(current.queue('fx').length == 0) { //Get next image, if it reached the end of the slideshow, start it back from the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').slideToggle(300, function () { $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').slideToggle(500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } } </script><style type="text/css"> body {font-family:arial;font-size:12px;} ul.slideshow {list-style:none;width:400px;height:200px;overflow:hidden;position:relative;margin:0;padding:0; } ul.slideshow li {position:absolute;left:0;right:0;} ul.slideshow li.show {z-index:500;} ul img {border:none;} #slideshow-caption {width:200px;height:70px;position:absolute;bottom:0;left:0;color:#fff;background:#;z-index:500;} #slideshow-caption .slideshow-caption-container {padding:5px 10px; z-index:1000;} #slideshow-caption h3 {margin:0;padding:0;font-size:14px;} #slideshow-caption p {margin:5px 0 0 0;padding:0;}</style></head><body> <ul class="slideshow"><li class="show"><a href="http://www.google.com"><img src="images/s1.jpg" width="200" height="200" title="Slide 1" alt=""/></a></li><li><a href="http://www.yahoo.com"><img src="images/freedom2.jpg" width="200" height="200" title="Slide 2" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/MONEY1.JPG" width="200" height="200" title="Slide 3" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/MONEY2.PNG" width="200" height="200" title="Slide 4" alt=""/></a></li><li><a href="http://www.google.com"><img src="images/cow1.jpg" width="200" height="200" title="Slide 5" alt=""/></a></li><li><a href="http://www.yahoo.com"><img src="images/bigcat.jpg" width="200" height="200" title="Slide 6" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/bird7.jpg" width="200" height="200" title="Slide 7" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/kitty03.jpg" width="200" height="200" title="Slide 8".alt=""/></a></li></ul></body></html>thank you for respond that is the code am using. and i want miltiple of it in a page and i want to have the stylesheet and jquary in tere separate folder so that they would not be at the head part. Edited April 25, 2013 by Guruman2 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 25, 2013 Share Posted April 25, 2013 For multiple slideshows, you'll need to make sure you can target each one individually. That code will target everything with a certain class, so the same code is trying to edit every slideshow at once. You need a way to tell it which one to work on. Like this part: $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); That is targeting UL elements with the class slideshow, and appending child elements to it. Instead of targeting every UL with a class of slideshow, that needs to be changed so that it targets a specific one. You can leave the class on the UL so that it gets the CSS information applied to it, but you should add an ID to the element: <ul class="slideshow" id="slideshow1"> The other ones you can call slideshow2, slideshow3, etc. So you need a way to tell the function which one to work on, so you need to pass the ID to it: function slideShow(speed, id) {...} slideShow(4000, 'slideshow1'); So the function has the slideshow ID, so that code needs to be updated to use it: $('#' + id).append('<li class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); Notice I also removed the ID from the LI element. So you also need to update the CSS to target that by class instead of ID. Instead of targeting #slideshow-caption, it should target .caption: .caption {width:200px;height:70px;position:absolute;bottom:0;left:0;color:#fff;background:#;z-index:500;}.caption .slideshow-caption-container {padding:5px 10px;z-index:1000;}.caption h3 {margin:0;padding:0;font-size:14px;}.caption p {margin:5px 0 0 0;padding:0;} Now more code in the slideShow function needs to be changed to target the slideshow by ID instead of class: //Set the opacity of all images to 0$('#' + id + ' li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity)$('#' + id + ' li:first').css({opacity: 1.0}).addClass('show'); //Get the caption of the first image from REL attribute and display it$('#' + id + ' .caption h3').html($('#' + id + ' li.show').find('img').attr('title'));$('#' + id + ' .caption p').html($('#' + id + ' li.show').find('img').attr('alt')); //Display the caption$('#' + id + ' .caption').css({opacity: 0.7, bottom:0}); The gallery function also needs to be updated to have the ID sent to it, and also where you use setInterval to run it: //Call the gallery function to run the slideshowvar timer = setInterval('gallery("' + id + '")',speed); And then the last part of the slideShow function: //pause the slideshow on mouse over$('#' + id).hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery("' + id + '")',speed); }); So that takes care of the slideShow function. Now the gallery function needs to be changed also: function gallery(id) { So you need to change the same kind of things to have it use the ID instead of classes: var current = ($('#' + id + ' li.show')? $('#' + id + ' li.show') : $('#' + id + ' li:first')); And this line was checking for an ID of the child element, but we had to remove that ID because you can only have one element with any ID. So we need to have it look for the class caption instead: var next = ((current.next().length) ? ((current.next().attr('class') == 'caption')? $('#' + id + ' li:first') :current.next()) : $('#' + id + ' li:first')); And then this is the last part to change: $('#' + id + ' .caption').slideToggle(300, function () { $('#' + id + ' .caption h3').html(title); $('#' + id + ' .caption p').html(desc); $('#' + id + ' .caption').slideToggle(500);}); So then you can change your ready function to start however many slideshows you want: $(document).ready(function() { //Execute the slideShow, set 20 seconds for each images slideShow(4000, 'slideshow1'); slideShow(4000, 'slideshow2'); slideShow(4000, 'slideshow3'); }); Then you'll just create the same type of UL/LI list for each slideshow, but give each one a different ID. Link to comment Share on other sites More sharing options...
Guruman2 Posted April 26, 2013 Author Share Posted April 26, 2013 @justsomeguy thank you. But i have done it and it seem not working below is how i edited it as directed by you.pls help me out <!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><title></title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript">$(document).ready(function() {//Execute the slideShow, set 20 seconds for each imagesslideShow(4000, 'slideshow1');slideShow(4000, 'slideshow2');slideShow(4000, 'slideshow3');});function slideShow(speed, id) {...}slideShow(4000, 'slideshow1');slideShow(4000, 'slideshow2');slideShow(4000, 'slideshow3');//append a LI item to the UL list for displaying caption$('ul.slideshow' '#slideshow1').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');$('ul.slideshow' '#slideshow2').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');$('ul.slideshow' '#slideshow3').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');//Set the opacity of all images to 0$( li').css({o'ul.slideshow' '#slideshow1'pacity: 0.0});//Get the first image and display it (set it to full opacity)$('ul.slideshow' '#slideshow1' li:first').css({opacity: 1.0}).addClass('show');$('ul.slideshow' '#slideshow2' li:first').css({opacity: 1.0}).addClass('show');$('ul.slideshow' '#slideshow3' li:first').css({opacity: 1.0}).addClass('show');//Get the caption of the first image from REL attribute and display it$('ul.slideshow' '#slideshow1' .caption h3').html($('ul.slideshow' '#slideshow1' li.show').find('img').attr('title'));$('ul.slideshow' '#slideshow1' .caption p').html($('ul.slideshow' '#slideshow1' li.show').find('img').attr('alt'));$('ul.slideshow' '#slideshow2' .caption h3').html($('ul.slideshow' '#slideshow2' li.show').find('img').attr('title'));$('ul.slideshow' '#slideshow2' .caption p').html($('ul.slideshow' '#slideshow2' li.show').find('img').attr('alt'));$('ul.slideshow' '#slideshow3' .caption h3').html($('ul.slideshow' '#slideshow3' li.show').find('img').attr('title'));$('ul.slideshow' '#slideshow3' .caption p').html($('ul.slideshow' '#slideshow1' li.show').find('img').attr('alt'));//Display the caption$('ul.slideshow' '#slideshow1' .caption').css({opacity: 0.7, bottom:0});$('ul.slideshow' '#slideshow2' .caption').css({opacity: 0.7, bottom:0});$('ul.slideshow' '#slideshow3' .caption').css({opacity: 0.7, bottom:0});//Call the gallery function to run the slideshowvar timer = setInterval('gallery("'ul.slideshow' '#slideshow1'")',speed);var timer = setInterval('gallery("'ul.slideshow' '#slideshow2'")',speed);var timer = setInterval('gallery("'ul.slideshow' '#slideshow3'")',speed);//pause the slideshow on mouse over$('ul.slideshow' '#slideshow1').hover(function () {clearInterval(timer);},function () {timer = setInterval('gallery("'ul.slideshow' '#slideshow1'")',speed);});function gallery() {$('ul.slideshow' '#slideshow2').hover(function () {clearInterval(timer);},function () {timer = setInterval('gallery("'ul.slideshow' '#slideshow2'")',speed);});function gallery() {$('ul.slideshow' '#slideshow3').hover(function () {clearInterval(timer);},function () {timer = setInterval('gallery("'ul.slideshow' '#slideshow3'")',speed);});function gallery() {//if no IMGs have the show class, grab the first imagevar current = ($('ul.slideshow' '#slideshow1' li.show')? $('ul.slideshow' '#slideshow1' li.show') : $('ul.slideshow' '#slideshow1' li:first'));var current = ($('ul.slideshow' '#slideshow2' li.show')? $('ul.slideshow' '#slideshow2' li.show') : $('ul.slideshow' '#slideshow2' li:first'));var current = ($('ul.slideshow' '#slideshow3' li.show')? $('ul.slideshow' '#slideshow3' li.show') : $('ul.slideshow' '#slideshow3' li:first'));//trying to avoid speed issueif(current.queue('fx').length == 0) {//Get next image, if it reached the end of the slideshow, start it back from the first imagevar next = ((current.next().length) ? ((current.next().attr('class') == 'caption')? $('ul.slideshow' '#slideshow1' li:first') :current.next()) : $('ul.slideshow' '#slideshow1' li:first'));var next = ((current.next().length) ? ((current.next().attr('class') == 'caption')? $('ul.slideshow' '#slideshow2' li:first') :current.next()) : $('ul.slideshow' '#slideshow2' li:first'));var next = ((current.next().length) ? ((current.next().attr('class') == 'caption')? $('ul.slideshow' '#slideshow3' li:first') :current.next()) : $('ul.slideshow' '#slideshow3' li:first'));//Get next image captionvar title = next.find('img').attr('title');var desc = next.find('img').attr('alt');//Set the fade in effect for the next image, show class has higher z-indexnext.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);//Hide the caption first, and then set and display the caption$('ul.slideshow' '#slideshow1' .caption').slideToggle(300, function () {$('ul.slideshow' '#slideshow1' .caption h3').html(title);$('ul.slideshow' '#slideshow1' .caption p').html(desc);$('ul.slideshow' '#slideshow1' .caption').slideToggle(500);});$('ul.slideshow' '#slideshow2' .caption').slideToggle(300, function () {$('ul.slideshow' '#slideshow2' .caption h3').html(title);$('ul.slideshow' '#slideshow2' .caption p').html(desc);$('ul.slideshow' '#slideshow2' .caption').slideToggle(500);});$('ul.slideshow' '#slideshow3' .caption').slideToggle(300, function () {$('ul.slideshow' '#slideshow3' .caption h3').html(title);$('ul.slideshow' '#slideshow3' .caption p').html(desc);$('ul.slideshow' '#slideshow3' .caption').slideToggle(500);});//Hide the current imagecurrent.animate({opacity: 0.0}, 1000).removeClass('show');}}</script><style type="text/css">body {font-family:arial;font-size:12px;}ul #slideshow,ul #slideshow1,ul #slideshow2,ul #slideshow3 {list-style:none;width:450px;height:200px;overflow:hidden;position:relative;margin:0;padding:0;}ul#slideshow li {position:absolute;left:0;right:0;}ul#slideshow li.show {z-index:500;}ul img {border:none;}.caption {width:200px;height:70px;position:absolute;bottom:0;left:0;color:#fff;background:#;z-index:500;}.caption .slideshow-caption-container {padding:5px 10px;z-index:1000;}.caption h3 {margin:0;padding:0;font-size:14px;}.caption p {margin:5px 0 0 0;padding:0;}</style></head><body><ul id="slideshow"><li class="show"><a href="http://www.google.com"><img src="images/s1.jpg" width="450" height="200" title="Slide 1" alt=""/></a></li><li><a href="http://www.yahoo.com"><img src="images/s2.gif" width="450" height="200" title="Slide 2" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/s3.gif" width="450" height="200" title="Slide 3" alt=""/></a></li><li><a href="http://www.msn.com"><img src="images/w2.gif" width="450" height="200" title="Slide 4" alt=""/></a></li></ul></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 26, 2013 Share Posted April 26, 2013 I think you got confused. I wasn't suggesting to paste this code in: function slideShow(speed, id) {...}slideShow(4000, 'slideshow1');slideShow(4000, 'slideshow2'); slideShow(4000, 'slideshow3'); That was just an example of what the slideShow function should look like, with the id parameter being passed to it. That code is not valid, "..." doesn't mean anything in Javascript. That's where the rest of the code for the function is supposed to be. For things like this: var current = ($('ul.slideshow' '#slideshow1' li.show')? $('ul.slideshow' '#slideshow1' li.show') : $('ul.slideshow' '#slideshow1' li:first'));var current = ($('ul.slideshow' '#slideshow2' li.show')? $('ul.slideshow' '#slideshow2' li.show') : $('ul.slideshow' '#slideshow2' li:first'));var current = ($('ul.slideshow' '#slideshow3' li.show')? $('ul.slideshow' '#slideshow3' li.show') : $('ul.slideshow' '#slideshow3' li:first')); That's not what I was talking about, I was talking about a single line of code: var current = ($('#' + id + ' li.show')? $('#' + id + ' li.show') : $('#' + id + ' li:first')); It has the id variable there, so it will fill in the correct ID when you call the function. If you run slideShow(4000, 'slideshow1'), then it uses "slideshow1" as the ID. If you run the function with slideshow2, then it uses slideshow2 as the ID. The point is to write a single function where you pass the ID and the function uses that ID to target the correct elements. Then you run the function once for each slideshow you have. I wasn't saying that you should copy and paste code and replace the ID each time, the code needs to be written to use a dynamic ID that you send to the function. It's not going to work to do this either: function gallery() {$('ul.slideshow' '#slideshow2').hover(function () {clearInterval(timer);},function () {timer = setInterval('gallery("'ul.slideshow' '#slideshow2'")',speed);});function gallery() {$('ul.slideshow' '#slideshow3').hover(function () {clearInterval(timer);},function () {timer = setInterval('gallery("'ul.slideshow' '#slideshow3'")',speed);} ); You can't have more than one function called "gallery". Like I said there, you need to send the ID that you want to use to the gallery function and have it use that ID variable. I showed the code changes you need to make, I would start over with the code you had before and read my post again. I'm not just giving you things to copy and paste, I'm trying to explain what the changes are doing so you understand how it works. Link to comment Share on other sites More sharing options...
Guruman2 Posted April 26, 2013 Author Share Posted April 26, 2013 ok my master thank you very much am expecting your help Link to comment Share on other sites More sharing options...
Guruman2 Posted April 26, 2013 Author Share Posted April 26, 2013 or if you like to communicate me through inbox i will like it thank Link to comment Share on other sites More sharing options...
justsomeguy Posted April 26, 2013 Share Posted April 26, 2013 Check post 4 again, that tells you what to do. If you don't understand what I'm saying then ask questions about it. Link to comment Share on other sites More sharing options...
Guruman2 Posted April 27, 2013 Author Share Posted April 27, 2013 thank you very much for bearing with all my questions. i have gone through post 4 as said by you upon all my effort to get where i make the mistake i was unable to prove myself right. pls give me an example of it with different id. thank in advance. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 29, 2013 Share Posted April 29, 2013 Post 4 has all of the changes you need to make. It's not that different from your original code, you don't need to add any new functions or anything. The point is just to change it from looking for things based on CSS classes to looking for things based on IDs. All of those changes are in post 4. If there's something there you don't understand then ask questions about it so I can help you learn. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now