Geek Answers Handbook

Jquery crossfade without plugin

a lot of things pointing to plugins to do crossfades and stuff, but nothing fits my needs.

I have 2 things on my page: Large image, div containing 3 or four small thumbnails

when you click a sketch, it reads in src and changes the original source image to a new image.

how can I make him disappear until the other disappears (so that he doesn't go to anything and then disappears in the new image)

heres my code:

$('.TnImage').live('click', function() {
        var newImage = $(this).attr('src');
        var oldImage = $('.mainImage').attr('src')
        $('.mainImage').fadeOut('slow');
        $('.mainImage').attr('src', newImage).fadeIn('slow');
    });

Just to clarify why I don’t want to use existing plugins, most of them require you to know the list of downloadable images before distributing thumbnail images from mysql database via php, d don't need to do 2 lists for thumbnails and 1 for main images and then hide everything but one main div with the image I want to show.

, , , , , , jquery. IMAGESWITCH, jQuery 1.4.3, html-(), , , , .

+5
3

jQuery , .

, , , . , . css , . , . CSS, . .

$('.TnImage').live('click', function() {
    $('.selected').fadeOut(500, function(){
        $(this).removeClass('selected');
    });
    $('#'+$(this).attr('imgidref')).delay(250).fadeIn('slow').addClass('selected');
});

, , .

+2

, , :

<!DOCTYPE html>
<html>
<head>

<script type="application/javascript" src="jquery-1.9.1.js"></script>
<script type="application/javascript" src="jquery-ui-1.10.2.custom.min.js"></script>

<link type="text/css" rel="stylesheet" href="jquery-ui-1.10.2.custom.min.css" />

<title></title>

<script>
var list = new Array();
var increment = 0;

$(function(){
$.when(
    $("#image_preload img").each(function(i, e){
        image = $(this).attr('src');
        list.push(image);
    })
).then(function(){
    rotate()
});
});

function rotate(){
$("#deactive").fadeOut(1000, function(){
});

$("#active").attr('src', list[increment]);

setTimeout(function(){
    increment++;

    if(increment == list.length){
        increment = 0;
    }

    $("#deactive").attr('src', list[increment]);

    $("#deactive").fadeIn(1000, function(){
        rotate();
    });
}, 5000);
}
</script>

<style>
html, body {
margin: 0px;
padding: 0px;
}

#display {
margin: 0px auto;
position: relative;
text-align: center;
width: 220;
}

#display img {
left: 0px;
margin: 0px auto;
position: absolute;
top: 0px;
}

#image_preload {
display: none;
}
</style>

</head>
<body>

<div id="display">
<img src="" width="200" height="200" alt="" id="active" />
<img src="" width="200" height="200" alt="" id="deactive" />
</div>

<div id="image_preload">
<img src="1.png" width="200" height="200" alt="" />
<img src="2.jpg" width="200" height="200" alt="" />
<img src="3.png" width="200" height="200" alt="" />
<img src="4.jpg" width="200" height="200" alt="" />
<img src="5.jpg" width="200" height="200" alt="" />
</div>

</body>
</html>

, .

JS Fiddle http://jsfiddle.net/DYYCy/

+2

More articles:


All Articles