Inline script to jQuery function to fade images on dynamic page

Question

I'm trying to fade images in and out instead of them instantly changing (as they currently do).

See my codepen for a working example: http://codepen.io/jsegarra/pen/ExCrj If you press a number the image will change.

I have a dynamic page and when someone gets to the projects section of the page there are 48 different projects to view. The codepen is an example of what one of those projects might look like. I know the inline onclick function is probably not the best way to do this, but every jQuery function i have attempted(many) have not worked correctly.

I would love one jQuery function that would control the changing of the image across all 48 sections, as I have jQuery controlling most of the page. I originally set up the HTML this way, which works, but the images change instantly, I need them to fade in/out.

I've tried a number of things, including just adding .fadeIn()/Out() somewhere in that inline function.

Then I took out the src of those images from the li and created new divs inside the encompassing div:

<div class="nextImage secondImage">
    <img src="document.getElementById('br_img').src = 'http://kerlabs.net/wp-content/uploads/2014/03/Scenic-Waterfall-HD-Wallpaper.jpg'" />
</div>

etc. for all 4 and added display: none; for those in the CSS to go with this jQuery function and added display:

$(document).ready(function () {
$('.one').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.firstImage').fadeIn(500);
    });
});
$('.two').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.secondImage').fadeIn(500);
    });
});
$('.three').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.thirdImage').fadeIn(500);
    });
});
$('.four').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.fourthImage').fadeIn(500);
    });
});
});

That didn't do anything, and neither did the 20 variations of it that I've tried. I'm basically stuck and need inspiration and help. I might look into CSS3 animations also to get this to work, because the HTML works, just needs little effect. Thanks for any help!

Answer 1

here you go: http://codepen.io/anon/pen/ltosw

you just need to give each of your lis a unique id and do this code on click event of them:

$('#one').click(function(){
    $('#br_img').fadeOut(300,function(){        
      $('#br_img').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG/800px-Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG');
      $('#br_img').fadeIn(300);
    });
  });

just FYI, the links to your second and third pictures seem to be broken!

UPDATE:

this is how you can do it with storing the links of the images into a data-attribute: http://codepen.io/anon/pen/niKzs

$('.imgNumerals li').click(function(){
    var that=this;
    $('#br_img').fadeOut(300,function(){        
      $('#br_img').attr('src',$(that).data('image'));
      $('#br_img').fadeIn(300);
    });
  });

Answer 2

Use the data-attribute HTML attribute. You can store an image link in there. JSFIDDLE

<li class="swap" data-img="http://image-link.jpg">1</li>

var object;
$('.swap').click(function(){
    object = $(this);
    $('#br_img').fadeOut(300, function(){ 
      $('#br_img').attr("src",object.attr("data-img")).fadeIn(300); 
    });
});
// this one jQuery function would set up the elements for all 48 of your 
// portfolio items (no need to duplicate it 48 times) as long as the image 
// URLs are stored in the data-img HTML attributes

Answer 3

oh my way seems a lot more long winded than @JRulle but i'll post anyway as it's a different take on it.

one of the things i first noticed is that by just replacing the src of the img a delay can be noticed where the image is downloaded, this can affect the look of the fade in as the image fades in before loading then suddenly appears once loaded.

The other thing I was thinking is that with 48 projects it would be a right bitch to have to add all those click listeners so went with a solution that will do everything just based on a list of images you want to display.

(working codepen can be found here)

declare all images in an array, if your page is being built dynamically this could be the only thing you need to build.

var images =[
"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG/800px-Cathedral_Group_panorama_from_Cathedral_Group_Scenic_Turnout2.JPG",
    "http://kerlabs.net/wp-content/uploads/2014/03/Scenic-Waterfall-HD-Wallpaper.jpg",
    "http://kerlabs.net/wp-content/uploads/2014/03/Blue-Ocean-Scenic-HD-Wallpaper-.jpeg",
    "http://kerlabs.net/wp-content/uploads/2014/03/Beauty-Blue-scenic-wallpaper.jpeg"
];

//preload images courtesy of http://stackoverflow.com/a/476681/2737978
function preload(arrayOfImages) {
    $(arrayOfImages).each(function() {
        $('<img/>')[0].src = this;
    });
}
preload(images);

//the next section are just some helpers to move images left/right or go to a specific image //use a pointer to know what image currently on

var pointer = 0;


incrementPointer = function() {
    if (pointer == images.length - 1) {
        pointer = 0;
    } else {
        pointer++;
    }
}

deincrementPointer = function() {
    if (pointer == 0) {
        pointer = images.length - 1;
    } else {
        pointer--;
    }
}
deincrementImage = function() {
        deincrementPointer();
        changeImage(pointer);
    }

incrementImage = function() {
    incrementPointer();
    changeImage(pointer);
}

//change image is where the actually image is swapped over using the complete call back to
//change the image and fade in after the fade out has completed, because the images are
//preloaded flicker should not be noticed

changeImage = function(index) {
    $imgPlaceHolder.fadeOut("slow", function() {
        $imgPlaceHolder.attr("src", images[index])
        $imgPlaceHolder.fadeIn("slow");
    });

}



var $imgPlaceHolder = $("#br_img");


$(document).ready(function() {
    //first image is placed in straight away
    $imgPlaceHolder.attr("src", images[pointer]);


    //listener setup on the backbutton
    $("a.arrowBack").click(function(event) {
        event.preventDefault();
        deincrementImage();

    });

//the li's are dynamically added and listeners attached based on the number of images
//using the html of the li is a bit ugly but this could be added to a data attribute instead

var index = 0;
    images.forEach(function() {
        $("<li>", {
            html: index + 1
        }).on("click", function() {
            changeImage(parseInt($(this).html()) - 1);
        }).appendTo('.imgNumerals');
        index++;

    });
});