jQuery показать изображение при нажатии на миниатюру

Question

Привет всем, у меня есть список из 4 миниатюр изображений.Когда щелкают по одной из этих миниатюр, я хочу, чтобы это увеличенное изображение партнера показывалось в стороне.Только одно большее изображение может быть показано одновременно.Как сейчас, я размещаю все 4 больших изображения друг над другом, и на изображении № 1 установлен z-индекс, поэтому по умолчанию он находится на вершине стека.Я считаю, что лучший способ добиться этого - щелкнуть большим пальцем, для всех изображений z-индекс устанавливается равным 0, а для z-индекса большего партнера устанавливается большее число?

Что будетСамый простой способ сделать это через JQuery?Я уверен, что мог бы найти какой-нибудь полнофункциональный плагин для галереи, чтобы сделать это, но это кажется излишним, понимаете?Спасибо за любые предложения.Мой текущий HTML-код размещен ниже:

    <style>
#productimagewrap {
    position:absolute;
    height:350px;
    }
#productimagewrap img {
    position:absolute;
    left:0;
    top:0;
}
</style>
<div class="moreimages">
    <a ahref="#" id="productthumb1">
        <img src="/images/products/ring1-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb2">
        <img src="/images/products/ring2-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb3">
        <img src="/images/products/ring3-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb4">
        <img src="/images/products/ring4-product_thumb.jpg" />
    </a>
</div>


<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
    <a href="/images/products/ring2-large.jpg" class="jqzoom" id="productimage2">
        <img src="/images/products/ring2-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring3-large.jpg" class="jqzoom" id="productimage3">
        <img src="/images/products/ring3-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring4-large.jpg" class="jqzoom" id="productimage4">
        <img src="/images/products/ring4-product.jpg" alt="Amber Ring" />
    </a>
</div>

Answer 1

Есть несколько способов сделать это. Простейшим способом было бы оставить видимым значение по умолчанию, а затем просто изменить его атрибут src. Это будет сделано так:

<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
</div>

Это изображение по умолчанию и теперь для части jquery:

$('.moreimages a').each(function() {
    $(this).click(function() {
        $('#productimagewrap img').attr('src', $(this).attr('src'));
    });
});

Это будет привязывать клик даже к любой ссылке в вашем классе moreimages, и при клике выбрать его src и изменить src увеличенного изображения. Этот код сделает это, но вам нужно будет изменить название изображений или заменить их или что-то еще, так как там будет отображаться маленькое изображение. Я оставлю это вам, так как не хочу сейчас с этим связываться: P

Answer 2

Я бы не пошел по маршруту z-index.Вызывает дополнительные проблемы, с которыми вам не придется сталкиваться.Попробуйте это:

$(function() {
  $('#productimagewrap a:gt(1)').hide();
  $('.moreimages a').click(function() {
    var index = $('.moreimages a').index(this);
    $('#productimagewrap a:visible').hide();
    $('#productimagewrap a:eq('+index+')').show();
  });
});

О, и убедитесь, что удалили этот атрибут "ahref" из ваших якорей .moreimages;)

Answer 3

ответ от realshadow

Я пробовал это, но мне кажется, что $ (this) является якорем, поэтому не имеет атрибута 'src'

Чтобы это работало, я использовал следующее:

$('.moreimages a').each(function() {
  $(this).click(function() {
    var aimg = $(this).find("img")
    $('#productimagewrap img').attr('src', $(aimg).attr('src'));
  });
});

с тем же предупреждением, что вам нужно сделать какую-то "замену" в 'src', чтобы изменить имя изображения на большее