jqzoom на нескольких изображениях

Question

У меня есть стандартная настройка одного основного изображения и нескольких миниатюр, которые можно щелкнуть, чтобы изменить основное изображение. Я использую jqzoom на главном изображении, но у меня была общая проблема изменения основного изображения, а увеличенное изображение стало пустым. Просматривая переполнение стека, я нашел некоторый код, который утверждал, что исправил это, и в некотором смысле это делает. Но вместо того, чтобы позволить каждому измененному изображению иметь масштаб, оно делает основное изображение просто ссылкой на большую версию, минуя вызов функции jqzoom.

, чтобы показать два примера: со стандартным кодом jqzoom и миниатюрами, не показывающими увеличение: http://designerspider.net/clients/jge/project2.php?id=17

с добавленным кодом и изображениями, которые становятся ссылками: http://designerspider.net/clients/jge/project.php?id=17

код, который я добавил, был

  $(".thumbs a").click(function(){  

      $(".jqclass").unbind();

      $(".jqclass").jqzoom(options);

      return false;
  };

Если кто-нибудь может увидеть, пропустил ли я что-нибудь или мне нужно сделать это иначе, я был бы признателен за любой совет. Я не могу понять, почему добавление дополнительной функции отключило бы основную функцию jqzoom: /

Answer 1

Вы можете найти, потому что вы используете две функции рядом: одну для смены изображений, а другую для отмены привязки функции масштабирования и последующего ее повторного связывания, вторая функция завершается до того, как изображение изменилось. Поэтому, когда изображение действительно меняется, оно все равно не будет работать.

Вторая проблема, вы на самом деле ничего не отменяете.

Итак, попробуйте сначала изменить на:

$(".jqclass").unbind(".jqclass");

В качестве альтернативы вы можете перенести немного больше в jQuery. Я проверил это:

Ваш HTML выглядел бы так:

<div class="projectphotos">
    <div id="photo_1">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>
    <div id="photo_2" style="display:none;">
        <a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
            <img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
        </a>
    </div>                                       
    <div class="thumbsdiv">
        <ul class="thumbs">
            <li>
                <img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
            </li>
            <li>
                <img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
            </li>
        </ul>
    </div>
</div>

А ваш jQuery вот так, я объяснил каждую строку:

var options = {
    zoomWidth: 250,
    zoomHeight: 250,
    position: 'right',
    yOffset: 0,
    xOffset: 0,
    title: false
}
$(".jqclass").jqzoom(options);

// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
    $(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
    // Get the photo linked to:
    var photo = $(this).attr('rel');
    // Unbind the zoom:
    $(".jqclass").unbind(".jqclass");
    // Hide the current image via its parent DIV:
    $(".jqclass").parent().hide();
    // Remove teh jqclass:
    $(".jqclass").removeClass("jqclass");
    // Show the clicked photo:
    $("#"+photo).show();
    // Add the class and the zoom:
    $("#"+photo+" a").addClass("jqclass").jqzoom(options);
});

Answer 2

Это способ очистки данных из jQZoom:

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

Поскольку jQZoom сохраняет данные объекта следующим образом:

$(el).data("jqzoom", obj);