Форум: Смена при клике "src" текущей на "src" следующей

Просмотр темы

PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery

Смена при клике "src" текущей на "src" следующей
lucky	#1 Опубликовано 27.08.2013 16:08
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	Приветствую! не знаю как правильно задать вопрос чтобы меня правильно поняли, попытаюсь так: вот примерная разметка html: Код `<ul id='foto'> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> </ul>` нужно чтобы при клике "src" текущей картинки менялся на "src" следующей, как примерно это делается при помощи Javascript, можно jQuery ? картинка уже открыта в окне, интересует сам процесс переключения по клику на картинку открытую в одном и том же окне без всяких стрелочек "вперёд, назад", просто клик, примерно так же как фото в объявлениях на сайте из рук в руки.. кликаеш на большую картинку подгружается следующая по списку.


Rush	#2 Опубликовано 27.08.2013 16:21
Администратор Разработчики Группа поддержки Сообщений: 1418 Зарегистрирован: 31.08.2010 14:41	GeSHi: Javascript `$('a').on('click',function(e){ e.preventDefault(); $(this).attr('src',$(this).parent('li').next().find('a').attr('src')); }); Добавлено за 0.001 секунд, используя GeSHi 1.0.8.10` а вообще принцип немного другой должен быть. непонятно, это слайдер, или попап или вообще что. AnnetLab \| @annetlab \| GitHub Addons repo \| AL Shop - open source e-shop for PHP-Fusion \| PHPtoday.ru
	Web

lucky	#3 Опубликовано 27.08.2013 18:42
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	фотогалерею хочу сделать как из рук в руки, снизу превью а выше большая картинка, почти сделал, только по клику в большом окне фоты не переключаются спасибо за код, я не очень подробно объяснил как и что у меня сейчас поэтому немного не так получилось точнее так : Код `<div id='bigfoto'><img src='http//..............'></div> <ul id='smallfoto'> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> <li><a href='http..............'><img src='http//..............'></a></li> </ul>` большое фото открывается в div id='bigfoto' когда кликаешь по маленьким фоткам из списка ul id='foto' теперь нужно чтобы при клике на большую фоту она заменялась на следующую из списка ul id='foto' использовал Ваш пример кода, при клике всегда открывается вторая по списку, сам виноват что сразу подробно не написал html, думал что переключение картинки в большом окне такое же как и в списке Изменил(а) lucky, 27.08.2013 21:53


lucky	#4 Опубликовано 27.08.2013 21:52
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	может кто знает где почитать именно про конкретный случай? гуглю но всё не то попадается.. или слайдер который работает с подобной html(см выше) наверное уже штук 100 фотогалерей и слайдеров перебрал да всё не то, у них сразу все большие картинки в списке "лежат"


lucky	#5 Опубликовано 28.08.2013 17:34
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	сейчас у меня такая конструкция GeSHi: Javascript `$('#bigfoto img').click(function() { var nimgSmall = $(#smallfoto li a).size(); if (nimgSmall != 1) { $(this).hide().attr('src',$(#smallfoto li a).parent('li').next().find('a').attr('href')); }); Добавлено за 0.001 секунд, используя GeSHi 1.0.8.10` при щелчке большая картинка меняется только на вторую по списку, как продолжить замену на следующую?


lucky	#6 Опубликовано 30.08.2013 00:10
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	вот такой код мне порекомендовали по данной теме: GeSHi: Javascript $(document) .ready(function () { var small = $("#smallfoto li img"), big = $("#bigfoto img"); small.each(function (i, el) { $(el) .click( function (event) { event.preventDefault(); big.fadeTo(00, 0.1, function () { big.attr({ "src": $(el) .parent() .attr("href") }) .data({ "next": i + 1 == small.size() ? 0 : i + 1 }); }); big.fadeTo(800, 1); } ) }); big.data({ "next": 1 }) .click(function (event) { small.eq($(this) .data("next")) .click() }) }); Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10 всё замечательно работает, по клику на большие фоты как и задумано меняется на следующую по списку, но когда кликаешь на одну и туже превьюшку несколько раз то одна и та же большая картинка грузится несколько раз.. по идеи зачем грузить одну и туже фотку несколько раз?! вот теперь думаю как правильно в этот код написать условие которое проверяло бы всё это дело


lucky	#7 Опубликовано 30.08.2013 07:36
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	вот полностью рабочий код для мини фото галереи с применением библиотеки jQuery GeSHi: Javascript $(document) .ready(function () { var small = $("#smallfoto li img"), big = $("#bigfoto img"); small.each(function (i, el) { var next = i + 1 == small.size() ? 0 : i + 1; $(el) .click( function (event) { event.preventDefault(); if(big.data("next") == next) return; big.fadeTo(00, 0.1, function () { big.attr({ "src": $(el) .parent() .attr("href") }) .data({ "next": next }); }); big.fadeTo(800, 1); } ) }); big.data({ "next": 1 }) .click(function (event) { small.eq($(this) .data("next")) .click() }) }); Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10 html и вообще для чего этот код смотрите предыдущие сообщения, может кому подобная галерея и понадобится, например для интернет магазина подойдёт, она компактная, простая и главное сайт не будет грузит, большие картинки подгружаются только по клику по превьюшкам

Поделиться этой темой
Социальные закладки:
URL:
BBcode:
HTML:

Перейти на форум:

Темы	Форум	Ответов / Просмотров	Последние сообщения
Галочка согласия при отправке формы →	HTML и CSS	1 / 661	04.02.2024 11:36
Магазин "Скупка банкот" в Москве →	Реклама на портале	0 / 327	20.09.2023 13:41
нужны ли на сайте "Закладки" и "История посещений", как в браузере? →	Пожелания и предложения	4 / 1057	11.08.2023 15:56
Ошибка при создании панели →	Ошибки, баги	6 / 1834	29.01.2021 21:58
Почему при нажатии на кнопку срабатывает проверка полей? →	HTML и CSS	1 / 4090	05.11.2020 10:33
Не работает "выйти" Maxthon 5.2.3.3000 →	Ошибки, баги	1 / 1635	22.02.2020 18:43
Говорим "Спасибо" →	Книга жалоб и предложений	14 / 3305	02.02.2020 14:58
Каким ява скриптом приделать выбор цвета для поля input type="text"? →	Вопросы новичков	1 / 3355	10.01.2020 20:47
Instagram ВК FaceBook - ведение аккаунтов "под ключ" →	Платные услуги	0 / 1124	01.12.2019 18:37
Панель "последние статьи" в зависимости от языка сайта и категории статьи →	Моды	9 / 3817	31.10.2019 22:59