X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Плавная смена изображений Jquery
InviS
InviS
Topic Starter сообщение 13.2.2010, 13:14; Ответить: InviS
Сообщение #1


Ребят, подскажите, пожалуйста, каким образом реализовать плавную смену изображений, как, например, сделано вот здесь:
http://paint.3dn.ru/Files/web_design/Inner.../InnerFade.html
Мне не нужно, чтоб сменялось автоматом, просто сама идея реализации. Плагин, который весит 113КБ и содержит кучу дополнительных и ненужных функций прикручивать я смысла тоже не вижу...
До этого реализовал что-то подобное, вот таким вот способом:
$(document).ready(function(){
            $("img:not(#wrap)").click(function(){
                var src=$(this).attr("src");
                $("#wrap").fadeOut('fast',function(){
                    $("#wrap").attr("src",src);
                });
                $("#wrap").fadeIn('slow');
            });
        });

По бокам у меня изображения мелкие (типа галлереи), а по центру большое изображение (контейнер для него). При нажатии на боковые картинки в центре должна появляться большая картинка с тем же источником, что и у нажатой.
Картинки сменяются, но прежде, чем смениться появляется на миг белый фон. Т.е. не одна картинка сменяет другую, а одна исчезает, а появляется другая. Вот как у меня получилось.
Что делать, в какую сторону копать? Я уже думал реализовать клонирование элемента и в нем делать fadeIn а в старом fadeOut, а потом что-то делать с контейнерами ненужными, но эта идея показалась мне дикой и не эстетичной. Помогите! :)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 13.2.2010, 14:25; Ответить: Letmetouchyou
Сообщение #2


http://www.html.by/showpost.php?p=56563&postcount=7
для белого фона допиши в css
.img {background:#fff}

только тут рандомная смена рисунков как вы в примере показали.
чтобы из галереии поялвилиьс изображения в большом окное то сделай так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.im').click(function(){
var src = $(this).attr('src');
$('.pic').fadeOut('slow',function(){
$('.pic').attr('src',src);
$('.pic').fadeIn('slow');
});
});

});
</script>
<style>
* body {background:#000;}



.img {border:1px dotted #fff; background:#fff; width:200px; height:200px; }
.pic {width:200px; height:200px;}
.im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;}
</style>
</head>
<body>

<img src="1/1.jpg" class="im">
<img src="1/2.jpg" class="im">
<img src="1/3.jpg" class="im">
<img src="1/4.jpg" class="im">
<img src="1/5.jpg" class="im">

<div class="img">
<img src="1/1.jpg" class="pic" >
</div>

</table>
</body>
</html>


вот пример
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 14.2.2010, 0:29; Ответить: InviS
Сообщение #3


Проблема была не в этом) В вашем примере они сменяются также, как и у меня =) Нужно чтоб одна картинка плавно другую сменяла, а не одна исчезала, а потом вторая появлялась. т.е. как бы одновременно запускался и fadeIn и fadeOut (100% - 0%, 90% -10%, 50% - 50%, 10% - 90%, 0% - 100%) типа такого)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 14.2.2010, 1:00; Ответить: Letmetouchyou
Сообщение #4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.im').click(function(){

var src = $(this).attr('src');
$('.img').css('background','url('+src+')');
$('.pic').fadeOut(2000,function(){
$('.pic').attr('src',src);
$('.pic').fadeIn('slow');
});
});

});
</script>
<style>
* body {background:#000;}



.img {border:1px dotted #fff; background:#fff; width:200px; height:200px; }
.pic {width:200px; height:200px;}
.im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;}
</style>
</head>
<body>

<img src="1/1.jpg" class="im">
<img src="1/2.jpg" class="im">
<img src="1/3.jpg" class="im">
<img src="1/4.jpg" class="im">
<img src="1/5.jpg" class="im">

<div class="img">
<img src="1/1.jpg" class="pic" >
</div>


</table>
</body>
</html>

так попробуй
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 14.2.2010, 1:12; Ответить: Letmetouchyou
Сообщение #5


или так
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var check=1;
$(document).ready(function(){
$('.im').click(function(){
var src = $(this).attr('src');
if(check==1){
$('.a').attr('src',src);
$('.b').fadeOut(2000);
$('.a').fadeIn(2000);
check=0;
} else {
$('.b').attr('src',src);
$('.a').fadeOut(2000);
$('.b').fadeIn(2000);
check=1;
}

});
});
</script>
<style>
* body {background:#000;}




.pic {width:200px; height:200px;}

.img img {position:absolute; top:+150px; left:+10px;}
.im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;}
</style>
</head>
<body>

<img src="1/1.jpg" class="im">
<img src="1/2.jpg" class="im">
<img src="1/3.jpg" class="im">
<img src="1/4.jpg" class="im">
<img src="1/5.jpg" class="im">

<div class="img">
<img src="1/1.jpg" class="pic a" >
<img src="1/2.jpg" class="pic b" >
</div>


</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 15.2.2010, 15:27; Ответить: InviS
Сообщение #6


Спасибо за старание помочь! Реализовал все используя 2 контейнера img. Может быть не элегантно, но действенно и красиво =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 15.2.2010, 16:14; Ответить: Letmetouchyou
Сообщение #7


InviS, так тоже самое и я сделал )
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 15.2.2010, 16:55; Ответить: InviS
Сообщение #8


Да! Только другая проблема появилась)) Если изображения разной ширины/высоты, то получается коллизия =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 15.2.2010, 17:08; Ответить: Letmetouchyou
Сообщение #9


InviS, если рахмеры первого ихображения меньге второго, то делать также смену изображений а после окночания сделать анимация ихеения размеров до нужного рамзера.
если наобороТ, размеры первого больше - то едслеть анимацию блока до ращмеров меньшеного изображения а помто смену изображения :Р
для етого html
<div style="position:relative; overflow:hidden">
<img style="position:absolute">
<img style="position:absolute">
</div>

:D
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sikwel_hb
sikwel_hb
сообщение 27.2.2010, 0:47; Ответить: sikwel_hb
Сообщение #10


а как бы здесь сделать смену с эффектом перекрытия? т.е. чтобы с изменением прозрачности одна затухала а другая уже начинала стремиться к 100% непрозрачности

упс, не досмотрел пример))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1168 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44760 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Продается сайт фотосток ИИ изображений
Хороший вариант!
20 alexey 3210 25.6.2023, 15:28
автор: alexey
Открытая тема (нет новых ответов) Ukr Private Proxy 4g Lifecell, Kyivstar, Vodafone (ТЕСТ, смена по ссылке, ротация)
Продам Личные Украинские приватные мобильные прокси 4g Lifecell, Kyivs
1 Kostyaxxxx 4244 20.6.2021, 20:26
автор: Kostyaxxxx
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКорректность показа вёрстки изображений на разных гаджетах
Не сохраняются пропорции изображений на смартфонах
1 master-vek 37244 25.3.2021, 13:22
автор: tedder


 



RSS Текстовая версия Сейчас: 28.3.2024, 17:46
Дизайн