简体   繁体   中英

Why is jQuery(document).ready not working? / How do I add CSS to an element in jQuery?

I'm new to jQuery and I'm having problem with a piece of code. I'm trying to add Image Power Zoomer v1.2 to my website, which works on the main image, but not the rollover image! The rollover image changes, but power zoomer only shows the loading image.

This is an example URL: Example1

This is my code:

    <script type="text/javascript">
    var bufferImage = new Array();
    function Buffer(filename) {
    var i = bufferImage.length;
    bufferImage[i] = new Image();
    bufferImage[i].src = filename;
    }
    function showImage(filename) {
    document.images[Image_Name].src = filename;

     }
    Image_Name = "image_pal";
    Buffer("thumbnail.php?pic=<? echo $image_pal['media_url'];?     >&w=600&sq=Y");
    jQuery(document).ready(function($){ //fire on DOM ready
    $('#myimage').addpowerzoom({
    powerrange: [2,8],
    largeimage: null,
    magnifiersize: [200,200] //<--no comma following last option!
    })
    })

   </script>  
    <? $sql_image_pal=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1 ORDER BY media_id ASC ");
    $image_pal=$db->fetch_array($sql_image_pal);
$sql_image=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1  ORDER BY media_id ASC ");?>    
    <div align="center" class="image_pal">
    <? if (empty($image_pal['media_url'])) {?>
    <img src="themes/<?=$setts['default_theme'];?>/img/system/noimg.gif"  name="image_pal" width="600" />
    <? } else {?>
    <img id="myimage" src="thumbnail.php?pic=<?=$image_pal['media_url'];?>&w=600&sq=N" border="0" alt="<?=$item_details['name'];?>" name="image_pal"  />
     <? }?>
     </div>
     <div class="list_carousel_img" align="center">
     <ul id="small_img">
     <? while($image=mysql_fetch_array($sql_image)){?>

     <? $ad_img=$image['media_url'];?>

        <li class="small_img">
     <a  href="thumbnail.php?pic=<? echo $ad_img;?>"   onmouseover="showImage('thumbnail.php?pic=<?=$image['media_url'];?>&w=600&sq=Y')"class="lightbox" rel="thumbnail_images"  ><img src="thumbnail.php?pic=<?=$image['media_url'];?>&w=60&sq=Y"  border="0" alt="<?=$item_details['name'];?>"/></a>
    </li>

     <? } ?>
        </ul>
            <div class="clearfix"></div>
            <a id="prev_img" class="prev_img" href="#"></a>
            <a id="next_img" class="next_img" href="#"></a> 
            <? if ($setts['lfb_enabled'] && $setts['lfb_auction']) { ?>
<div><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="5"></div>
<? include("scripts/scroller/show_rep_details.php"); ?>
<? } ?>

I'm having trouble with jQuery Selectors. I have looked all over the web, spent many hours, but with no joy.

This is the site i got the Image Power Zoomer v1.2 from: dynamicdrive.com

Question #2

Like i said im a newbie but i think my problems here jQuery selector these are some examples but i do not know what i need to add from my code

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('img.showcase').addpowerzoom() //add zoom effect to images with CSS       class "showcase"
$('#gallerydiv img').addpowerzoom() //add zoom effect to all images         inside DIV with ID "gallerydiv"
})

</script>

What do i need to add here

$('????????????').addpowerzoom() 

Thanks For all your help

jQuery(document).ready(function($){ //fire on DOM ready

==>

$(document).ready(function(){ //fire on DOM ready

Unless you changed your jQuery selector, this is the default

Because you asked another question in the answers (and even got an upvote?)

What do i need to add here

 $('????????????').addpowerzoom() 

This is my answer to that question:

$("img").each(function(){
     $(this).addpowerzoom();
}); 

like in this demo: http://jsfiddle.net/u7w0ppq9/ with adding class instead of powerzoom (I do not have that library so, but it's basically the same)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM