Форум

desertFox · #1 (**permalink**) 29.08.2013, 23:27

Приветствую.

Есть мини фото галерея, работает с применением библиотеки 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

desertFox,
а как выглядит код при нажатии на маленькую картинку,

рони · #3 (**permalink**) 30.08.2013, 01:14

Сообщение от 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>

desertFox · #4 (**permalink**) 30.08.2013, 02:08

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

при нажатии на маленькие картинки у меня был такой код:

$(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);	
});


});

desertFox · #5 (**permalink**) 30.08.2013, 02:40

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

рони · #6 (**permalink**) 30.08.2013, 03:24

Сообщение от desertFox

при повторном клике на одну и туже превьюшку снова не грузилась большая фотка

добавлено смотрите код выше строки 49, 54 ну и 62

desertFox · #7 (**permalink**) 30.08.2013, 10:24

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

как быстро ответили, не ожидал если честно

рони · #8 (**permalink**) 30.08.2013, 12:40

время анимации в 55 строке небыло проставлено.

desertFox · #9 (**permalink**) 30.08.2013, 17:15

Цитата:

время анимации в 55 строке небыло проставлено.

а я уж подумал что это сокращённый вариант 1000 )

Форум

Справочник

Discord чат

Курсы javascript