Wedge
Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on May 11th, 2011, 10:08 PM
-
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:
<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:
<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).
-
...did the browser report any errors?
-
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:
$(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!
-
That tends to suggest it's configured to be in no-conflict mode.
-
That tends to suggest it's configured to be in no-conflict mode.
-
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 $.
-
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 $.
-
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.
-
Did you try pasting the code in some advanced text editor and debugging it?
-
Either rewrite the plugin to use jQuery() instead of $(), or disable no-conflict mode. :^^;: