jqZoom изменить источник изображения - PullRequest
Новая
       6

jqZoom изменить источник изображения

6 голосов
/ 12 января 2010

У меня есть галерея из 5 миниатюр и одного большего изображения. Я привязал jqZoom к большому изображению, поэтому, когда вы наводите на него курсор мыши, вы можете увидеть увеличенную версию. У меня возникают проблемы, когда пользователь нажимает альтернативный эскиз. Я могу изменить изображение большего размера, но увеличенное изображение остается исходным. Я не могу заставить jqZoom изменить увеличенное изображение в соответствии с миниатюрой. Вот пример того, что я пытаюсь сделать. Вы нажимаете на текст, и миниатюра меняется, но увеличенное изображение jqZoom остается прежним. Как изменить это так, чтобы jqZoom загружал новое изображение в области увеличения? 

<script type="text/javascript">

$(function() {
 var options = {
 zoomWidth: 250,
 zoomHeight: 250,
 showEffect: 'fadein',
 hideEffect: 'fadeout',
 fadeinSpeed: 'fast',
 fadeoutSpeed: 'fast',
 showPreload: true,
 title: false,
 xOffset: 100
 };
 $(".jqzoom").jqzoom(options); 

});

function changeImgSrc() {
 document.getElementById('bigImage').src = '4.jpg';
 document.getElementById('smallImage').src = '3.jpg';
  var options = {
 zoomWidth: 400,
 zoomHeight: 400,
 showEffect: 'fadein',
 hideEffect: 'fadeout',
 fadeinSpeed: 'fast',
 fadeoutSpeed: 'fast',
 showPreload: true,
 title: false,
 xOffset: 100,
 containerImgSmall: '3.jpg',
 containerImgLarge: '4.jpg'
 };
 $(".jqzoom").jqzoom(options);

}
</script>
</head>

<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
  <img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>

</div>

Спасибо за вашу помощь !!

Ответы [ 6 ]

8 голосов
/ 01 октября 2010

Простой способ - отменить привязку jqZoom при каждом изменении изображения, а затем повторно привязать его, как только вы изменили источник основного изображения 

var jqzoomOptions = {
        zoomWidth: 438,
        zoomHeight: 390,
        title: false
    }
$("#mainPic").jqzoom(jqzoomOptions);

/* image thumbs */
$("#productPicThumbs a").click(function(){

    // change pic source here

    $("#mainPic").unbind();
    $("#mainPic").jqzoom(jqzoomOptions);

    return false;
});
3 голосов
/ 30 июля 2010

У меня была похожая проблема с вашим ... У меня есть важные советы с этого сайта, пожалуйста, проверьте это ... http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache

1 голос
/ 14 марта 2013

Вот как вы можете очистить данные от jqzoom: 

$('.jqclass').removeData('jqzoom');

Поскольку jqzoom хранит данные в этом объекте: 

$(el).data("jqzoom", obj);
1 голос
/ 28 мая 2012

Старый, но хороший плагин js.

Я решил эту проблему с помощью jQuery, изменив атрибут jqimg источника изображения: 

$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");

По следующему: 

<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">

Окончательно получим: 

<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">

Вы также можете применить функцию "attr" jQuery для изменения "src" и "alt" этого div.

0 голосов
/ 09 сентября 2013

С последней версией jQZoom вы можете создавать галереи (jQZoom может управлять вами).

1.Прикрепите идентификатор галереи к основному якорному атрибуту rel. 

<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
    <img src="images/small-1.jpg" />
</a>

2. Управляйте атрибутами миниатюр "class" и "rel".

Класс zoomThumbActive прикреплен к вашим эскизам с помощью jQZoom. По умолчанию укажите этот класс для выбранного эскиза (это должно быть то же изображение в вашем основном элементе привязки) 

<ul>
    <li>
        <a class="zoomThumbActive" href="javascript:void(0);" rel="{
            gallery: 'gallery-1', 
            smallimage: 'images/small-1.jpg', 
            largeimage: 'images/big-1.jpg'
        }">
            <img src="images/thumbnail-1.jpg">
        </a>
     </li>
    <li>
        <a href="javascript:void(0);" rel="{
            gallery: 'gallery-1', 
            smallimage: 'images/small-2.jpg', 
            largeimage: 'images/big-2.jpg'
        }">
            <img src="images/thumbnail-2.jpg">
        </a>
     </li>
     <li>
         <!-- ... -->
     </li>
</ul>

Структура атрибута миниатюры rel очень важна.

Базовые элементы:

  • gallery : идентификатор галереи, к которой он принадлежит,
  • smallimage : путь к маленькому изображению (загружается при нажатии на уменьшенное изображение),
  • largeimage : путь к большому изображению.
0 голосов
/ 26 июля 2012

Удаление основного изображения и его повторное добавление должно заставить его работать, вот пример 

$('a.main_thumb').jqzoom({ title: false });

    $("a.thumb").click(function (e) {
        e.preventDefault();
        var thumbUrl = $(this).attr("href");
        var thumbImg = $(this).find("img").attr("data-img");

        $(".main_thumb").remove();
        $(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");

        $('a.main_thumb').jqzoom({ title: false });
    });
...