Jquery кроссфейд без плагина - PullRequest
Новая
       20

Jquery кроссфейд без плагина

5 голосов
/ 14 апреля 2011

Здесь много вещей, указывающих на плагины для кроссфейдов и тому подобное, но ни один из них действительно не соответствует моим потребностям.

У меня есть 2 вещи на моей странице: большое изображение, div, содержащий 3 или четыре маленьких эскиза

при нажатии на миниатюру он читает в src и изменяет источник основного изображения на новое изображение.

как мне заставить его постепенно исчезать, в то время как другое исчезает (так чтоне исчезает, пока не исчезает новый образ)

вот мой код: 

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

Просто для пояснения, почему я не хочу использовать существующие плагины, это то, что больше всего требует от васЧтобы узнать список изображений, которые должны быть загружены заранее, миниатюрные изображения извлекаются из базы данных MySQL через php, и я бы предпочел не создавать 2 списка: один для миниатюр и 1 для основных изображений, а затем скрывать все, кромеодин основной div с изображением, которое я хочу показать.

Я посмотрел плагин цикла, но я бы предпочел не использовать его, я знаю, что люди продолжают думать о том, чтобы не изобретатьно если я продолжу использовать плагины для работы, я никогда не пойму, как работает jquery.Раньше я использовал превосходный IMAGESWITCH, но не работает с jquery 1.4.3, и мне нужна эта версия для его html-данных (), и поэтому, опираясь на это ранее, я теперь застрял, поэтому я спросил способ сделать этобез использования плагинов.

Ответы [ 3 ]

2 голосов
/ 14 апреля 2011

jQuery цикл сделает это, но это плагин.

Чтобы сделать это без плагина, вы можете загрузить изображения и затем скрыть все, кроме первого.При нажатии на миниатюру, вы затемните выбранное изображение.Я бы добавил класс CSS к первому изображению, чтобы сделать его проще.Я также дал бы идентификатор каждому изображению, чтобы ссылаться на них.Используйте CSS, чтобы поместить их друг на друга.В теге миниатюрного изображения вам также понадобится ссылка на большое изображение. 

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

Я знаю, что это грубый пример, но он должен охватывать основные принципы.

2 голосов
/ 08 августа 2013

Так как не было ответа на вопрос о плавном переходе без плагина, вот решение, которое я придумала: 

<!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 голосов
/ 14 апреля 2011

Если я понимаю вопрос (кроме вашего желания избегать плагинов :) jQuery Cycle должен делать именно то, что вы хотите.Используйте fade переход в сочетании с pager опцией .

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

...