0

我正在尝试根据图像的尺寸禁用 jquery 插件，因此如果图像> 500x480 则启用插件，否则如果图像低于该尺寸则禁用插件。

我尝试的方法不起作用。有人可以帮帮我吗？

插件的原始功能

   $(function(){
    $('#zoom1').bind('click',function(){            
        var cloudZoom = $(this).data('CloudZoom');  
            cloudZoom.closeZoom();
            $.fancybox.open(cloudZoom.getGalleryList());// 
            return false;
        });
    });

         CloudZoom.quickStart();

我试过的，

 var img = document.getElementById('#zoom1'); 
 var width =  img.naturalWidth;
 var height = img.naturalHeight;
 $(function(){
    $('#zoom1').bind('click',function(){            
        var cloudZoom = $(this).data('CloudZoom');  
            cloudZoom.closeZoom();
            $.fancybox.open(cloudZoom.getGalleryList());// 
            return false;
        });
    });
 if(var width > 500 || height > 480) {
         CloudZoom.quickStart();//I would like to initiate this. 
         }

html

  <div class="imgwrap">
 <div class="sldwrp">
        <div class="sldimgwrp">
        <?php if($result->num_rows > 0){ if ($row['image_one'] != '') {?>
        <img class="cloudzoom appsld" id ="zoom1" src="<?php echo $path.$row['image_one'];?>"
                 title="Click to view larger image."
                 data-cloudzoom='
                 zoomImage:"<?php echo $path.$row['image_one'];?>",
                 zoomSizeMode: "image",
                 captionPosition:"top",
                 maxMagnification:"4"
                 '><?php }}?>
                 </div>
        <div class="thumbs">
           <div class="thumb_img">
           <?php if($result->num_rows > 0){ if ($row['image_one'] != '') {?>
            <a href="<?php echo $path.$row['image_one'];?>" class="thumb-link">    
                <img class="cloudzoom-gallery" id="thumbwd" src="<?php echo $path.$row['image_one'];?>"
                     data-cloudzoom=' 
                     useZoom:"#zoom1",
                     image:"<?php echo $path.$row['image_one'];?>",
                     zoomImage:"<?php echo $path.$row['image_one'];?>"'>
            </a>
            <?php }}?>
4

1 回答 1

0

你有几个错误。尝试这个 ：

// fisrt mistake : you have to get the image dimensions when the dom element is created
// for this, put it after the $(function(){ 
$(function(){
    var img = document.getElementById('zoom1'); // second mistake here with the #zoom1 instead of just zoom1
    var width =  img.naturalWidth;
    var height = img.naturalHeight;

    $('#zoom1').bind('click',function(){
        if (width>500 || height>480) { // make your test here
            var cloudZoom = $(this).data('CloudZoom');  
            cloudZoom.closeZoom();
            $.fancybox.open(cloudZoom.getGalleryList());
            return false;
        }
        return true;
    });

    CloudZoom.quickStart(); // leave this alone
});
于 2013-11-03T21:04:56.060 回答