Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Topics - MultiformeIngegno
61
Off-topic / JQuery slideshow
« 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:
Code: [Select]
And this where you want the slideshow:
Code: [Select]
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).
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).
62
The Pub / Php and HipHop
« on April 7th, 2011, 11:51 AM »64
Today I found this website! It's useful when you don't want to spend time on grids!! :D
Dunno if can be useful.. anyway, here's the link: http://www.1kbgrid.com
Dunno if can be useful.. anyway, here's the link: http://www.1kbgrid.com