Забыли пароль?
Запросите новый здесь.

Автор темы: lucky
ID темы: 1750
Информация:
Тема содержит 7 сообщения, была просмотрена 8794 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery
 Распечатать тему
Смена при клике "src" текущей на "src" следующей
lucky
Приветствую! не знаю как правильно задать вопрос чтобы меня правильно поняли, попытаюсь так:

вот примерная разметка 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
Загрузить источник  GeSHi: Javascript
  1.  
  2. $('a').on('click',function(e){
  3. e.preventDefault();
  4. $(this).attr('src',$(this).parent('li').next().find('a').attr('src'));
  5. });
  6.  
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10

а вообще принцип немного другой должен быть. непонятно, это слайдер, или попап или вообще что.
 
Web
lucky
фотогалерею хочу сделать как из рук в руки, снизу превью а выше большая картинка, почти сделал, только по клику в большом окне фоты не переключаются

спасибо за код, я не очень подробно объяснил как и что у меня сейчас поэтому немного не так получилось

точнее так :

Скачать исходники  Код

<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
может кто знает где почитать именно про конкретный случай? гуглю но всё не то попадается.. или слайдер который работает с подобной html(см выше)

наверное уже штук 100 фотогалерей и слайдеров перебрал да всё не то, у них сразу все большие картинки в списке "лежат"
 
lucky
сейчас у меня такая конструкция

Загрузить источник  GeSHi: Javascript
  1. $('#bigfoto img').click(function() {
  2. var nimgSmall = $(#smallfoto li a).size();
  3. if (nimgSmall != 1) {
  4. $(this).hide().attr('src',$(#smallfoto li a).parent('li').next().find('a').attr('href'));
  5.  
  6. });
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10


при щелчке большая картинка меняется только на вторую по списку, как продолжить замену на следующую?
 
lucky
вот такой код мне порекомендовали по данной теме:

Загрузить источник  GeSHi: Javascript
  1. $(document)
  2. .ready(function () {
  3. var small = $("#smallfoto li img"),
  4. big = $("#bigfoto img");
  5. small.each(function (i, el) {
  6. $(el)
  7. .click(
  8. function (event) {
  9. event.preventDefault();
  10. big.fadeTo(00, 0.1, function () {
  11. big.attr({
  12. "src": $(el)
  13. .parent()
  14. .attr("href")
  15. })
  16. .data({
  17. "next": i + 1 == small.size() ? 0 : i + 1
  18. });
  19. });
  20. big.fadeTo(800, 1);
  21. }
  22. )
  23. });
  24. big.data({
  25. "next": 1
  26. })
  27. .click(function (event) {
  28. small.eq($(this)
  29. .data("next"))
  30. .click()
  31. })
  32. });
  33.  
Добавлено за 0.004 секунд, используя GeSHi 1.0.8.10


всё замечательно работает, по клику на большие фоты как и задумано меняется на следующую по списку, но когда кликаешь на одну и туже превьюшку несколько раз то одна и та же большая картинка грузится несколько раз.. по идеи зачем грузить одну и туже фотку несколько раз?!

вот теперь думаю как правильно в этот код написать условие которое проверяло бы всё это дело
 
lucky
вот полностью рабочий код для мини фото галереи с применением библиотеки jQuery

Загрузить источник  GeSHi: Javascript
  1.  
  2. $(document)
  3. .ready(function () {
  4. var small = $("#smallfoto li img"),
  5. big = $("#bigfoto img");
  6. small.each(function (i, el) {
  7. var next = i + 1 == small.size() ? 0 : i + 1;
  8. $(el)
  9. .click(
  10. function (event) {
  11. event.preventDefault();
  12. if(big.data("next") == next) return;
  13. big.fadeTo(00, 0.1, function () {
  14. big.attr({
  15. "src": $(el)
  16. .parent()
  17. .attr("href")
  18. })
  19. .data({
  20. "next": next
  21. });
  22. });
  23. big.fadeTo(800, 1);
  24. }
  25. )
  26. });
  27. big.data({
  28. "next": 1
  29. })
  30. .click(function (event) {
  31. small.eq($(this)
  32. .data("next"))
  33. .click()
  34. })
  35. });
  36.  
Добавлено за 0.006 секунд, используя GeSHi 1.0.8.10


html и вообще для чего этот код смотрите предыдущие сообщения, может кому подобная галерея и понадобится, например для интернет магазина подойдёт, она компактная, простая и главное сайт не будет грузит, большие картинки подгружаются только по клику по превьюшкам
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Проблема при установке  →  Установка и настройка системы 11 / 1764 18.09.2018 14:28
Важно! 2 месяца бесплатно, при продлении или заказе dedicated сервера! Акция!  →  Хостинг 0 / 346 07.06.2018 04:37
Как найти в БД для панели "похожие статьи, новости, темы"?  →  Пожелания и предложения 0 / 509 23.04.2018 17:29
Скидки 40% на "Безлимитный хостинг 2018" от ABCD.Host  →  Хостинг 0 / 1266 28.03.2018 18:33
Возможно ли при помощи тестов (вопросов) проверить совместимость М и Ж?  →  Разное 0 / 725 09.08.2017 22:44
Каталог "PHP-функций и функций CMS PHP-Fusion"  →  Народное творчество 5 / 9301 20.05.2017 10:17
Тема "curve_theme"  →  Темы оформления 7 версии 3 / 3784 25.01.2017 12:37
как задать класс textarea при включенном TinyMCE?  →  Темы оформления 7 версии 5 / 9008 14.11.2016 15:05
Чем чистить спам в "предложить"?  →  Пожелания и предложения 0 / 3026 03.11.2016 18:05
Дополнить панель "Последние активные темы форума"  →  Моды 2 / 5497 10.08.2016 17:01
Топ 5 пользователей форума
Alex Alex (1,197)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)