Использование Jquery Функции в JavaScript

Question

Полностью переработанный для ясности и простоты

Я использую поднять зум (объектив функция масштабирования), как показано на on this website. У меня есть Radrotator, заполненный двоичными изображениями, которые я дал событие onclick на DataBound ротатора. Onclick Я хочу изменить главное намного большее изображение над Rotator на основе изображения, которое они нажали, с Rotator на всех клиентских сайтах.

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

<img id="zoom_07" runat="server" src="small.jpg" alt="image" /> 

Ниже приведены две функции javascript. Первый использует Elevatezoom для увеличения изображения, а второй - при нажатии на двоичные изображения в ротаторе.

<script type="text/javascript" > 
jQuery(document).ready(function ($) { 
    $("#zoom_07").elevateZoom({ 
     zoomType: "lens", 
     lensShape: "round", 
     lensSize: 200 
    }); 
}); 

function changeImage(url) { 

    var img = document.getElementById('zoom_07'); 
    img.src = url; 
    img.setAttribute('data-zoom-image', url); 
} 

Как я могу изменить изображение в стороне клиента лупой? Спасибо за любую помощь по этому вопросу.

Answer 1

This is the solution Я пошел. Я создал теги изображений в ротаторе (который привязан к двоичным изображениям) и изменил основное изображение при щелчке этих изображений. Мне, конечно, пришлось преобразовать двоичные образы в обычные изображения, а затем сохранить их.

Answer 2

jQuery is JavaScript, поэтому вы уже вызываете его в функции JavaScript. это просто анонимная функция на документ готов.

function changeImage(url) { 
    var img = document.getElementById('zoom_07'); 
    img.src = url; 
    img.setAttribute('data-zoom-image', url); 

    $(img).elevatedZoom({ 
     zoomType: "lens", 
     lensShape: "round", 
     lensSize: 200 
    }); 
} 

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

Answer 3

Я сделал некоторые широкие предположения о том, что вы щелкаете и источник URL здесь:

(function ($) { 
    // I invented this, use your element 
    $('#clickemeid').click(function() { 
     // I invented this "someattr" attribute, set to where you get that 
     var url = $(this).attr('someattr'); 
     $("#zoom_07").attr('src', url).attr('data-zoom-image', url).elevateZoom({ 
      zoomType: "lens", 
      lensShape: "round", 
      lensSize: 200 
     }); 
    }); 
})(jQuery); 

сейчас, делая предположение, вы хотите, чтобы переключаться между ЦСИ и данными-зумом-изображениями

(function ($) { 
    $('#zoom_07').click(function() { 
     var me = $(this); 
     var zoomurl = me.attr('data-zoom-image'); 
     var origurl = me.attr('src'); 
     me.attr('data-zoom-image', origurl).attr('src', zoomurl).elevateZoom({ 
      zoomType: "lens", 
      lensShape: "round", 
      lensSize: 200 
     }); 
    }); 
})(jQuery);