MultiformeIngegno

  • Posts: 1,337
JQuery slideshow
« on May 11th, 2011, 10:08 PM »Last edited on May 11th, 2011, 10:46 PM by MultiformeIngegno
Hello! :)
Now that Nao is a JQuery-expert (:P), he deserves this question.

I use this code (ok, probably it's sh*t, but I can't code and I tried to create it merging some JQuery slideshows I found over the internet) to create a slideshow using JQuery.

This goes within the <head> tags:
Code: [Select]
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>

<script type="text/javascript">

$(document).ready(function() {

//Execute the slideShow, set X seconds for each images
slideShow(6500);

});

function slideShow(speed) {


//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});

//Call the gallery function to run the slideshow
var 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'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//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 current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

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

ul.slideshow {
list-style:none;
width:940px;
height:320px;
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;
}
</style>

And this where you want the slideshow:

Code: [Select]
<ul class="slideshow">
<li class="show"><img src="http://blablabla.com/image1.jpg" width="940" height="320" title="" alt="" /></li>
<li><img src="http://blablabla.com/image2.jpg" width="940" height="320" title="" alt="" /></li>
<li><img src="http://blablabla.com/image3.jpg" width="940" height="320" title="" alt="" /></li>
</ul>

The question is: why does this work ONLY with JQuery 1.5.x and newer versions? With 1.4.x and earliers it just doesn't slide!

Thanks in advance! :(


post corrected, it works with 1.5.x and newers, and doesn't with earliers (not the contrary).

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: JQuery slideshow
« Reply #1, on May 11th, 2011, 10:28 PM »
...did the browser report any errors?
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

MultiformeIngegno

  • Posts: 1,337
Re: JQuery slideshow
« Reply #2, on May 11th, 2011, 10:36 PM »
OK, a quick correction. It's the contrary, sorry. :(
I meant: it works with newer versions (1.5.x and newers), and doesn't with 1.4.x and earliers.

If I use JQuery 1.5.x and newers I don't get any error on Firefox's console, if I use 1.4.x I get this error:
Error: $ is not a function

This is the line:
Code: [Select]
$(document).ready(function() {

EDIT: I know it's a strange question (why do you worry if it works fine with newer versions?), but it's annoying because everytime I update my WordPress installation I have to remember to update also JQuery to 1.6 because the default version provided is 1.4.4 and my slideshow wouldn't work with it!

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: JQuery slideshow
« Reply #3, on May 11th, 2011, 10:43 PM »
That tends to suggest it's configured to be in no-conflict mode.

MultiformeIngegno

  • Posts: 1,337

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: JQuery slideshow
« Reply #5, on May 11th, 2011, 10:46 PM »
jQuery doesn't have to impose itself on $, because other scripts can use that too, so jQuery has a no-conflict mode wherein it uses jQuery instead of $.

MultiformeIngegno

  • Posts: 1,337
Re: JQuery slideshow
« Reply #6, on May 11th, 2011, 10:47 PM »
Quote from Arantor on May 11th, 2011, 10:46 PM
jQuery doesn't have to impose itself on $, because other scripts can use that too, so jQuery has a no-conflict mode wherein it uses jQuery instead of $.
Oh.. so they changed something after 1.4.x versions..?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: JQuery slideshow
« Reply #7, on May 11th, 2011, 10:49 PM »
Well, that was in before 1.4 but it's worth testing jQuery instead of $. I don't know why it's broken, I see nothing immediately wrong with it otherwise.

DoctorMalboro

  • I like rounded borders.
  • Posts: 316
Re: JQuery slideshow
« Reply #8, on May 11th, 2011, 11:40 PM »
Did you try pasting the code in some advanced text editor and debugging it?

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: JQuery slideshow
« Reply #9, on May 12th, 2011, 12:26 AM »
Either rewrite the plugin to use jQuery() instead of $(), or disable no-conflict mode. :^^;: