JavaScript Forum

**shdw** · 05-11-2009, 08:44 AM

Hello,
I have a little problem, that I cannot solve for a few long days.
I want to create gallery with 'magnifying glass' script, carousel script and ajax navigation.
'Magnifying glass' and carousel work great until I reload content (image) with ajax. Than 'magnifying glass' just isn't working.
I read that I can fix it using livequery, but this pluggin have really small documentation and every example is about 'click' function, not like in this 'magnifiying glass' script, onmouse, without clicking. I don't know how to use jquery at all, I want to learn it soon. Can someone help me with this?

index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
        <title>shdw.pl // coding, design, everything you need</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
        <link rel="stylesheet" type="text/css" href="css/jcarousel.skin.css" />
        <link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
        <script type='text/javascript' src="js/jquery.jqzoom1.0.1.js"></script>
        <script type="text/javascript" src="js/ajax.navigation2.js"></script>
        
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#mycarousel').jcarousel({
                    vertical: true,
                    scroll: 1
                });
            });
        </script>
        
        <script type="text/javascript">
            $(document).ready(function(){
                var options = {
                    zoomWidth: 390,
                    zoomHeight: 412,
                        xOffset: 120,
                        yOffset: -20,
                        showPreload: false,
                        title: false
            };
                $(".jqzoom").jqzoom(options);
            });
                
        </script>
</head>

<body>

        <div id="product_photos_wrapper">
            <div id="thumbnails_list">
                <ul id="mycarousel" class="jcarousel jcarousel-skin-simple">
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_1.html','big_image_content');"><img src="img/thumb_1.jpg" width="56" height="84" alt="" /></a></li>
                    <li><a href="javascript:void(0)" onclick="open_url('html/thumb_2.html','big_image_content');"><img src="img/thumb_2.jpg" width="56" height="84" alt="" /></a></li>
                </ul>
            </div><!-- thumbnails_list -->
            
            <div id="big_image_wrapper">
                <div id="big_image_content">
                    <a href="img/big_1.jpg" class="jqzoom"  title="Nice Dress">
                        <img src="img/image_1.jpg" title="Brand New Colorful Dress"  >
                    </a>
                </div><!-- big_image_content -->
                
                <a href="#" id="full_size_image">View Full-Size Image</a>
            </div><!-- big_image_wrapper -->
            
            <div class="clear"></div>
        </div><!-- product_photos_wrapper -->
    
</body>
</html>

thumb_1.html:

Code:

<a href="img/big_1.jpg" class="jqzoom"  title="Nice Dress">
    <img src="img/image_1.jpg" title="Brand New Colorful Dress"  >
</a>

thumb_2.html:

Code:

<a href="img/big_2.jpg" class="jqzoom"  title="Nice Dress">
    <img src="img/image_2.jpg" title="Brand New Colorful Dress"  >
</a>

Whole page preview: http://shdw.pl/tmp/netaporter/

Used scripts:
JQZoom
Ajax Navigation 2
JCarousel

Thanks a lot,
Kamil