Jquery zoom wont work [closed]

StackOverflow https://stackoverflow.com//questions/12714038

Question

i'm trying to implement Jquery zoom on my Joomla driven website on the catalog images. I cant get this thing to work, so can anybody help me solve this problem?

I've added the these scripts in the head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://www.myurl.mk/templates/beez_20/javascript/jquery.zoom.js"></script>

here is the error it gives:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
(anonymous function)

here is link to a example of my site

here is my code:

<script>
        $(document).ready(function(){
            $('#ex1').zoom({url: '<?php echo $this->item->imageXLarge; ?>'});
        });
    </script>
      <div class="itemImageBlock" style="float:none;">
          <span class="itemImage" id="ex1">
                <img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
          </span>
Was it helpful?

Solution

I saw your page and found that you are loading jQuery file after depended files. There is many error in console. first one is jQuery not defined. Move your jQuery file before all other script files.

After moving jQuery on top your site is looking fine. I attached an snapshot as you requested. enter image description here

OTHER TIPS

On your example page, you're importing ks2.js before jquery.js.

This should be the first item after your <head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top