Jquery crossfade without a plugin_问答_开发者_运维开发者技术经验分享

a lot of stuff here pointing to plugins to do crossfades and stuff, but non开发者_JS百科e really fit my needs.

i have 2 things on my page: A large image, a div containing 3 or four small thumbnails

when a thumbnail is clicked it reads in the src and changes the main images source to the new image.

how do i get it to fade one in while the other fades out ( so it does not go to nothing before fading 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 for clarification why i dont want to use existing plug-ins, is that most require you to know the list of images to be loaded in before hand, the thumbnail images are retrived from a mysql database through php, and i'd rather not have to make 2 lists one for the thumbnails and 1 for the main images then hiding all but the one main div with the image in i want showing.

i have had a look a cycle plugin but i'd prefewr not to use it, I know people keep going on about not reinventing the wheel, but if i keep using plugins to do stuff, i'm never going to learn the nuts and bolts of how jquery works. i used to use the excellent IMAGESWITCH but does not work with jquery 1.4.3, and i need this version for its's html data() and so by relieing on this previously, i am now stuck so why i have asked a way of doing this without using plugins.

jQuery cycle will do this, but it is a plugin.

In order to do this without a plugin, you could load the images and then hide all but the first. When an thumbnail is clicked, you then fade out the selected image. I would add a css class to the first image to make it easier to do. I'd also give an id to each image to reference them. Use CSS to place them on top of each other. In your thumbnail image tag, you would need some sort of reference to the big image too.

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

I know this is a crude example, but it should cover the basic principles.

If I understand the question (aside from your desire to avoid plugins :) jQuery Cycle should do exactly what you want. Use the fade transition combined with the pager option.

http://jsfiddle.net/mattball/xM3cC/

Since there hasn't been an answer about crossfading without a plugin, here is the solution that I came up with:

<!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>

May not be the best in the world, but it's simple and it works.

And here is the JS Fiddle Example http://jsfiddle.net/DYYCy/