Web people/Programmers - help needed, get in here!

Maccy

Maccy

Maccy

Commissario
Joined
23 Nov 2004
Posts
42,922
Location
Herts
I've been given the task of taking 6 images and making them fade into one another (sort of like a slideshow). How it transitions isn't massively important, either over the top fade in or fade from right to left - doesn't matter.

However I lack the programming skills to do this, and don't want to do this in Flash for obvious reasons. Am I correct in thinking that this is achievable by programming it in Javascript?

Sorry if I'm not making sense! Any help would be greatly appreciated :)
 
You could also use an existing plugin.

Innerfade is great for simple transitions

Nivo Slider is pretty sweet and has some nifty transitions.

jQuery Tools Scrollable is what I typically use as it has all the features I could need in one package, without being massive in size. However, it can only slide from one pane to the next, it can't do fading.

Edit, I can't believe I missed jQuery Cycle. You can do a lot with it.
 
Last edited:
Thanks guys, will take a look tomorrow.

Aye I have fairly extensive knowledge on HTML/CSS and have started dabbling with JavaScript :)
Cocoa Touch is my next goal!
 
I used jquery cycle lite for my frontpage - pretty easy to get up and running. Not sure if it had right/left style fades, I just used the fade in time. All cut and paste style coding, I'm no programmer!

Can check the link in me sig if you want to see it/view source...
 
Not working here :(

Seems your JS is a bit muddled, and has some weird characters in it?
Code: 
$(function() {
    setInterval( "slideSwitch()", 5000 );
    
$(document).ready(function(){
$(‘#slideshow IMG’).css({opacity: 0.0});
$(‘#slideshow IMG:first’).css({opacity: 1.0});
setInterval( “slideSwitch()â€, 2000 );
});
});

Unless you cancel one of those setInterval calls, you're going to have 2 running simultaneously which is going to mean it's changing slides at odd times.

I'd seriously suggest you try one of the plugins. 1) because it saves re-inventing the wheel and 2) because it'll mean you have to do less browser testing.

*Ignore this - you've updated the site - it works :)
 
Last edited:
Looks fine to me based on what you outlined in your OP. My only critisism would be all the images are loaded when the page fires up.

edit

Code: 
function slideSwitch() {
  var $active = $('#slideshow IMG.active');
  if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
  $active.addClass('last-active');
  $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
      $active.removeClass('active last-active');
    });
}
  
$(function() {
  setInterval( "slideSwitch()", 5000 );
});
 
Last edited:
Also I notice you are using jQuery 1.2.6? Is this a client requirement? I also thought next() and prev() were jQuery 1.4?

Either way, look at loading the library from google code - It saves on bandwidth, it'll load very quickly from Google's CDN and most importantly it'll already be cached if the user has visited a site which delivers it from Google Code.

Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>


edit: I'm thinking of first() and last() which are just shorthand for the :first :last selectors
 
Last edited:
Thanks, I've changed to the Google Code one. In your previous post I can't seem to find much difference between what you put and my code? :confused:

EDIT - changed the last to first, is this better now?
 
My edit was for the benefit of spunky as the code he posted wasnt what I was seeing.

Rest of the code looks fine - the chaining is done correctly, you correctly cache your selector operations and you're using id's instead of classes where possible. Very good, tidy code :)

As mentioned before, my only complaint is the html markup - Personally I would use a single image tag and have an animation div which pre-loads the next image and then caches it; but you could argue thats over kill for this implementation.
 
You must log in or register to reply here.
Back
Top Bottom