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

Автор темы: lucky
ID темы: 1750
Информация:
Тема содержит 7 сообщения, была просмотрена 8115 раз.
Просмотр темы
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.005 секунд, используя GeSHi 1.0.8.10


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

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

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Alex Alex (1,174)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)