Question

I’ve been googling away for a while now and realized I need help.

I’m developing something for a friend of mine in PHP, but he wants a really difficult to program (to me) image slider on his website. I’m Dutch and the example I’m gonna show you is of a Dutch website: http://www.iboma.com/index.asp. I’m trying to make a similar animation but in javascript/jQuery.

Only instead of the sample wood being shown I need to fade in an image and corresponding link. The text might be an extra. It’s not needed.

Standard sliders aren’t good enough so I need custom code. No fancy animations, crossfade would be ideal. After the image has faded in I need an image+link faded in overlaying the background image, also while maintaining the overlaying logo also shown on the example website.

I’d like to feed the image slider images from PHP either with JSON array or pre-loaded on the website (probably search engine friendlier).

var photos = [  { image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.stackoverflow.com/" }, 
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.google.com/" },
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.yahoo.com/" }];

Could you guys help me on my way developing such an animation?

Starting off:

I’m trying to figure out how to have an efficiënt infinte loop stacking the various events I have to trigger to animate the thing.

First off, do I use normal javascript or am I better off using jQuery regarding load and speed?

Secondly, what’s a good implementation of such code for the infinite loop?

Third, how do I trigger various events after each other not disrupting the flow of the animation.

Fourth, while animation the background-image change how do I make sure the overlaying logo doesn’t disappear behind the animation? This is one of my main issues. Using fadeIn and fadeOut the logo disappears behind my images.

Suggestions?

Answer 1

Finally got what i needed.

Sófka you helped me on my way. Thx for that. It was what i needed.
Oh and I used the Orbit image slider for this.

The following code works for me:

(function($) {
        $(document).ready(function() {
            $('#featured').orbit({
                animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
                animationSpeed: 500,                // how fast animtions are
                timer: true,                        // true or false to have the timer
                advanceSpeed: 6000,                 // if timer is enabled, time between transitions
                pauseOnHover: true,                 // if you hover pauses the slider
                startClockOnMouseOut: true,         // if clock should start on MouseOut
                startClockOnMouseOutAfter: 0,       // how long after MouseOut should the timer start again
                directionalNav: false,              // manual advancing directional navs
                captions: false,                    // do you want captions?
                captionAnimation: 'fade',           // fade, slideOpen, none
                captionAnimationSpeed: 800,         // if so how quickly should they animate in
                bullets: false,                     // true or false to activate the bullet navigation
                bulletThumbs: false,                // thumbnails for the bullets
                bulletThumbLocation: '',            // location from this file where thumbs will be
                beforeSlideChange: function() {
                    $('#featured a, #featured span').fadeOut(400, function() {
                        $('#featured a, #featured span').remove();
                    });

                    $('#featured img').each(function(index) {
                        if ($('#featured img').eq(index).css("z-index") == 3) {
                            var className = $('#featured img').eq(index).attr("class");
                            $('#featured img')
                                .eq($('#featured img').index(this))
                                .after($('#featured-images .' + className)
                                    .clone()
                                    .css("z-index","4")
                                );
                            $('#featured a.' + className)
                                .css("top",$("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 50)
                                .css("left",$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 50)
                                .fadeIn(1000, function() {
                                    $('#featured a.' + className + ' img').fadeIn(1500);
                                    $('#featured img')
                                        .eq($('#featured img').index(this))
                                        .after($('#featured-text .' + className)
                                            .clone()
                                            .css({"z-index":"4",
                                            "top":"0px",
                                            "display":"block",
                                            "opacity":0,
                                            "position":"absolute",
                                            "left":$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 70 - $('#featured-text .' + className).width()})
                                        );
                                    $('#featured span.' + className).animate({
                                        opacity: 1,
                                        top: $("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 25
                                    }, 1000);
                                });

                        }
                    });
                }
            });
        });
    }(jQuery));

Needed to add some event hooks to the code libary myself but that wasn’t too hard.

HTML:

<div id="featured">
                <img src="http://localhost/foo/images/bar.png" class="image-1" width="924" height="317" alt="" />
                <img src="http://img265.imageshack.us/img265/3355/62320763.jpg" class="image-2" width="924" height="317" alt="" />
                <img src="http://img411.imageshack.us/img411/1237/75707805.jpg" class="image-3" width="924" height="317" alt="" />
            </div>
            <div id="featured-images">
                <a href="" class="image-1" style="width:100px;height:50px;border:1px solid #FFF;"><img src="http://localhost/foo/images/foobar.png" width="100" height="50" alt="" style="display:none" /></a>
            </div>
            <div id="featured-text">
                <span class="image-1" style="display:none;font-size:30px;color:#FFF;">Dit is een test</span>
            </div>