Login | Register | FAQ
Anonymous

Multiple slide show problem

+ Post a reply

Page 1 of 1


Multiple slide show problem

by Guruman2 » Sun Apr 14, 2013 3:50 pm

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
User avatar

Guruman2

  • Posts: 18
  • Joined: Wed Jan 23, 2013 11:30 am

Re: Multiple slide show problem

by XainPro » Mon Apr 15, 2013 9:54 pm

you should change id or classes name otherwise the script will confused how to change image with same id.
in short use a slideshow which uses different id and classes for multiple slideshows
User avatar

XainPro

  • Posts: 2401
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Multiple slide show problem

by Guruman2 » Sat Apr 20, 2013 4:23 pm

thank u for answer me.
here is how i code my jquery n style. i have change the html code and it is only one is working.
<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 images
slideShow(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 slideshow
var 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 image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//trying to avoid speed issue
if(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>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Execute the blink, set 20 seconds for each images
blink(4000);

});

function blink(speed) {

//append a LI item to the UL list for displaying caption
$('ul.blink').append('<li id="style-solution" class="solution"><div class="blink-solution-box"><h3 class="1"></h3><p class="2"></p></div></li>');




//Set the opacity of all images to 0
$('ul.blink li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.blink li:first').css({opacity: 1.0}).addClass('me');

//Get the solution of the first image from REL attribute and display it
$('#style-solution h3.1').html($('ul.blink li.me').find('img').attr('title'));
$('#style-solution p.2').html($('ul.blink li.me').find('img').attr('alt'));

//Display the solution
$('#style-solution').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the blink
var timer = setInterval('gallery()',speed);

//pause the blink on mouse over
$('ul.blink').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the me class, grab the first image
var current = ($('ul.blink li.me')? $('ul.blink li.me') : $('#ul.blink li:first'));

//trying to avoid speed issue
if(current.queue('fx').length == 0) {

//Get next image, if it reached the end of the blink, start it back from the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'blink-solution')? $('ul.blink li:first') :current.next()) : $('ul.blink li:first'));

//Get next image solution
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, me class has higher z-index
next.css({opacity: 0.0}).addClass('me').animate({opacity: 1.0}, 1000);

//Hide the solution first, and then set and display the solution
$('#style-solution').slideToggle(300, function () {
$('#style-solution h3.1').html(title);
$('#style-solution p.2').html(desc);
$('#style-solution').slideToggle(700);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('me');

}

}
</script>
<style type="text/css">

body {
font-family:arial;
font-size:12px;
}


ul.blink {
list-style:none;
width:450px;
height:200px;
overflow:hidden;
position:relative;
margin:0;
padding:0;

}

ul.blink li {
position:absolute;
left:0;
right:0;
}

ul.blink li.me {
z-index:500;
}

ul img {
border:none;
}


#style-solution {
width:200px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:;
z-index:500;
}

#style-caption .blink-solution-box {
padding:5px 10px;
z-index:1000;
}

#style-solution h3.1 {
margin:0;
padding:0;
font-size:14px;
}

#style-solution p.2 {
margin:5px 0 0 0;
padding:0;
font-size:16px;
color:red;
test-decoraton:bold;
}
User avatar

Guruman2

  • Posts: 18
  • Joined: Wed Jan 23, 2013 11:30 am

Re: Multiple slide show problem

by Guruman2 » Sat Apr 20, 2013 5:12 pm

this is the html code i use
(1) <ul class="slideshow">
<li class="show"><a href="http://"><img src="images/s1.jpg" width="200" height="200" title="Slide 1" alt=""/></a></li>
<li><a href="http://"><img src="images/freedom2.jpg" width="200" height="200" title="Slide 2" alt=""/></a></li>
<li><a href="http://"><img src="images/MONEY1.JPG" width="200" height="200" title="Slide 3" alt=""/></a></li>
<li><a href="http://"><img src="images/MONEY2.PNG" width="200" height="200" title="Slide 4" alt=""/></a></li>
<li><a href="http:/"><img src="images/cow1.jpg" width="200" height="200" title="Slide 5" alt=""/></a></li>
<li><a href="http://"><img src="images/bigcat.jpg" width="200" height="200" title="Slide 6" alt=""/></a></li>
<li><a href="http://"><img src="images/bird7.jpg" width="200" height="200" title="Slide 7" alt=""/></a></li>
<li><a href="http://"><img src="images/kitty03.jpg" width="200" height="200" title="Slide 8" alt=""/></a></li>
</ul>
(2) <ul class="blink">
<li class="me"><a href=""><img src="images/s1.jpg" width="450" height="200" title="Slide 1" alt=""/></a></li>
<li><a href=""><img src="images/s2.gif" width="450" height="200" title="Slide 2" alt=""/></a></li>
<li><a href=""><img src="images/s3.gif" width="450" height="200" title="Slide 3" alt=""/></a></li>
<li><a href=""><img src="images/w2.gif" width="450" height="200" title="Slide 4" alt=""/></a></li>
</ul>
I pls help me to check it is only one is working after i have i have edited it as you direct me , then i use both the style and jquery in the head part <head></head> but i want them in seperate folder i did it but it did not work for me pls help me
User avatar

Guruman2

  • Posts: 18
  • Joined: Wed Jan 23, 2013 11:30 am

Re: Multiple slide show problem

by Guruman2 » Tue Apr 23, 2013 11:22 pm

thank mr cubesquer for your respond. ok i have seen what you me but how can i get a better one
User avatar

Guruman2

  • Posts: 18
  • Joined: Wed Jan 23, 2013 11:30 am


+ Post a reply

Page 1 of 1