使用jQuery函數在JavaScript

-1

我使用提升變焦（鏡頭變焦功能）如圖所示on this website。我有一個Radrotator，裏面充滿了Binary Images，我在旋轉器的DataBound上給出了一個onclick事件。 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); 
}

我如何更改放大鏡客戶端的形象呢？謝謝你對這件事的任何幫助。

來源

2013-03-11 Eric

你的問題有點不清楚，你說'我怎麼能在JAVASCRIPT函數中調用這個jquery函數？'目前還不清楚你指的是什麼jQuery功能。您所展示的代碼中，除非出現任何內容，否則我沒有看到任何特別的東西。請參閱「混淆jQuery名稱空間」下的http://api.jquery.com/ready/部分。你準備好的函數所做的一切就是將你的jQuery變量轉換爲你的處理器方法中的$。如果你從ready函數獲取代碼並用jQuery替換$，它應該在你的javascript函數中工作。 – Rich 2013-03-11 23:13:44

我希望做的是調用$（「＃zoom_07」）。changeImage函數b/c內的elevateZoom數據縮放圖像圖像沒有正確更改，因爲img.src圖像確實發生了變化。我編輯了一下我的問題。讓我知道如果它仍然不清楚。 – Eric 2013-03-11 23:50:35

根據你的NEW描述，別人有這個問題，並得到最新版本：http://www.elevateweb.co.uk/q/discussion/5/rotatingsliding-images-zoom-on-the-container-div - 否則，我想我會建議你向該網站的幫助臺發佈問題; - 可能沒有人會在這裏調試別人的插件代碼。 – 2013-03-12 13:10:58

This is the solution我跟着去了。我在旋轉器中創建了圖像標籤（綁定到二進制圖像），並在點擊這些圖像時更改了主圖像。我當然必須將二進制圖像轉換爲常規圖像，然後保存它們。

來源

2013-03-12 19:53:19 Eric

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 
    }); 
}

上述代碼是您的事件處理程序，它已被更新以顯示您希望調用函數來更新縮放。

來源

2013-03-11 23:11:47

謝謝！我會嘗試這個 – Eric 2013-03-11 23:50:51

數據縮放圖像仍然沒有正確更新。我認爲這將是修復。 – Eric 2013-03-12 01:45:27

我在設置data-zoom-image url後會做一個提示，並且該屬性實際上正在改變，但不會更改該用戶。放大鏡只會顯示以前的放大圖像，而在img.src中定義的圖像確實會改變。 – Eric 2013-03-12 01:48:35

我做了你點擊什麼一些廣泛的假設和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);

NOW，讓你想src和數據縮放圖像之間進行切換的假設

(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);

來源

2013-03-11 23:24:16

這些都沒有工作。請參閱我修改的問題，因爲我試圖使它更清楚。 – Eric 2013-03-12 03:53:53

使用jQuery函數在JavaScript

回答

相關問題