Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.08.2013, 23:27
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

Смена при клике "src" текущей на "href" следующей из списка
Приветствую.

Есть мини фото галерея, работает с применением библиотеки jQuery.

html:
<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>
</ul>


При клики на превьюшки в блоке #smallfoto в блоке #bigfoto открывается большая картинка

Как сделать чтобы при клике по большой картинке также была смена на большую картинку следующую по списку, по достижению последней переключалась на первую и так по кругу?

вот пока такое решение:

$('#bigfoto img').click(function() {

	var countImg = $('#smallfoto li a').length;
	if (countImg > 1) {
	
	
	if ($('#smallfoto li a').attr('href') == $(this).attr('src')) {
	$(this).hide().attr('src',$('#smallfoto li a').parent('li').next().find('a').attr('href'));
	$(this).load(function() {
		$(this).fadeIn(1000);
	});
	}
	

	}
	
	imgSmall.fadeTo(500,1);
});


это не работает так как нужно, меняется только на вторую по списку и переключения дальше нет
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2013, 00:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

desertFox,
а как выглядит код при нажатии на маленькую картинку,
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2013, 01:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от desertFox
Как сделать чтобы при клике по большой картинке также была смена на большую картинку следующую по списку, по достижению последней переключалась на первую и так по кругу?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>body{
    margin:0;
    padding:0;
    font:75%/120% Arial,Helvetica,sans-serif;
  }
  #bigfoto img{
    border:solid 1px #ccc;
    width:550px;
    height:400px;
    padding:5px;
  }

  #smallfoto a{
    border:solid 1px #ccc;
    width:100px;
    height:100px;
    padding:3px;
    margin:2px;
    float:left;
  }

  #smallfoto a:hover{
    border-color:#FF9900;
  }

  #smallfoto li{
    list-style:none;
  }

  #smallfoto{
    margin:0;
    padding:0;
  }
  </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
 $(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(500, 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()
                 })
         });
</script>

</head>

<body>
<div id='bigfoto'><img src='http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg' title="next"></div>
<ul id='smallfoto'>
  <li><a href="http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg" title="Image 2"><img src="http://ru.lookatcode.com/show/7580928785829615/img2-thumb.jpg"></a></li>
  <li><a href="http://ru.lookatcode.com/show/7580928785829615/img3-lg.jpg" title="Image 3"><img src="http://ru.lookatcode.com/show/7580928785829615/img3-thumb.jpg"></a></li>
  <li><a href="http://ru.lookatcode.com/show/7580928785829615/img4-lg.jpg" title="Image 4"><img src="http://ru.lookatcode.com/show/7580928785829615/img4-thumb.jpg"></a></li>
  <li><a href="http://ru.lookatcode.com/show/7580928785829615/img5-lg.jpg" title="Image 5"><img src="http://ru.lookatcode.com/show/7580928785829615/img5-thumb.jpg"></a></li>
  <li><a href="http://ru.lookatcode.com/show/7580928785829615/img6-lg.jpg" title="Image 6"><img src="http://ru.lookatcode.com/show/7580928785829615/img6-thumb.jpg"></a></li>
</ul>
</body>
</html>

Последний раз редактировалось рони, 30.08.2013 в 12:38.
Ответить с цитированием
  #4 (permalink)  
Старый 30.08.2013, 02:08
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

круто, благодарю, поставил Ваш код,

при нажатии на маленькие картинки у меня был такой код:
$(document).ready(function() {

var imgBig = $('#bigfoto img');
	imgSmall = $('#smallfoto li a');

imgSmall.click(function(event) {
	event.preventDefault();
	if (imgBig.attr('src') != $(this).attr('href')) {
	imgBig.hide().attr('src',$(this).attr('href'));
	imgBig.load(function() {
		$(this).fadeIn(1000);
	});
	}
	imgSmall.fadeTo(500,1);
	$(this).fadeTo(500,0.6);	
});


});
Ответить с цитированием
  #5 (permalink)  
Старый 30.08.2013, 02:40
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

а куда условие вставить чтобы при повторном клике на одну и туже превьюшку снова не грузилась большая фотка? по идеи она уже загружена и при повторном клике зачем её снова грузить
Ответить с цитированием
  #6 (permalink)  
Старый 30.08.2013, 03:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от desertFox
при повторном клике на одну и туже превьюшку снова не грузилась большая фотка
добавлено смотрите код выше строки 49, 54 ну и 62
Ответить с цитированием
  #7 (permalink)  
Старый 30.08.2013, 10:24
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

благодарю, то что хотел

как быстро ответили, не ожидал если честно
Ответить с цитированием
  #8 (permalink)  
Старый 30.08.2013, 12:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

время анимации в 55 строке небыло проставлено.
Ответить с цитированием
  #9 (permalink)  
Старый 30.08.2013, 17:15
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

Цитата:
время анимации в 55 строке небыло проставлено.
а я уж подумал что это сокращённый вариант 1000 )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 01:16
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27
Смена id при клике Nestor Общие вопросы Javascript 6 04.03.2009 19:10