1

Собственно, вопрос в теме.

Пример: На странице 2 картинки, первая уже раскрытая(например), если я жму на вторую картинку (она в миниатюре), то она должна раскрываться (фулл), а первая закрываться (стать миниатюрой).

Можно ли такое сделать с этим кодом?

http://jsfiddle.net/so2qccue/3/

/*
Скорее всего, это сделает код минимальным:
Путь к фулл и миниатюрным пикчам различается лишь в префиксе c_ в начале названия имени картинки. То есть миниатюра - c_image.gif и фулл - image.gif.
*/

Array.prototype.forEach.call(document.getElementsByClassName('zoom-img'), function(e){e.onclick = function(){
    this.src = this.classList.toggle('large') ? this.src.replace(/c_(\w+\.\w{3})$/, "$1") : this.src.replace(/(\w+\.\w{3})$/, "c_$1");
	return false;
}});

/*
На элементы с классом zoom-img вешается обработчик, добавляющий/убирающий префикс с_.
На раскрытые изображения вешается класс large.
*/
a {
    display: block;
}
<a href="#">
    <img class="zoom-img" src="https://pp.vk.me/c622028/v622028382/3429c/c_A_hFKXL7rr4.jpg" />
</a>

<a href="#">
    <img class="zoom-img" src="https://pp.vk.me/c625529/v625529008/22499/c_14ze0pGcvdg.jpg"
    />
</a>

2

1 ответ 1

1

Попробуйте код

$(document).ready(function() {

  $(".zoom-img").click(function() {

    $(".zoom-img").each(function(index) {
      if ($(this).hasClass("large")) {
        var newSrc = $(this).attr('src');
        newSrc = newSrc.replace(/(\w+\.\w{3})$/, "c_$1");
        $(this).attr('src', newSrc);
      }


      $(this).removeClass("large");
    });

    $(this).addClass("large");

    var newSrc = $(this).attr('src');
    newSrc = newSrc.replace(/c_(\w+\.\w{3})$/, "$1");
    $(this).attr('src', newSrc);

  });

});
a {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#">
  <img class="zoom-img" src="https://pp.vk.me/c622028/v622028382/3429c/c_A_hFKXL7rr4.jpg" />
</a>

<a href="#">
  <img class="zoom-img" src="https://pp.vk.me/c625529/v625529008/22499/c_14ze0pGcvdg.jpg" />
</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.