elevate-zoom in jquery tabs

Question

I am trying to use the elevate-zoom plugin in jquery tabs. It works fine in the first tab, but breaks when changing tabs. I understand what is happening, but don't know how to solve it. If I change the class it takes a second click for the .hide to take effect. I'm a rookie to jquery, any help would be appreciated. This is the first time I've posted code, I hope it's correct.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"</script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="Scripts/jquery.elevatezoom.js"></script>
    <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet" />
    <style type="text/css">
        .hide { position: absolute; top: -9999px; left: -9999px; }
    </style>
    </head>
    <body>
    <div id="wrapper" style="min-height: 520px;">
    <div id="tabs" style="margin: 0px 10px 10px 10px; min-height: 460px; font-size: 9pt;">
        <ul>
            <li><a href="#fragment-1"><span><b>First Panel</b></span></a></li>
            <li><a href="#fragment-2"><span>Second Panel</span></a></li>
        </ul>

            <div id="fragment-1" class="first">
                <div id='Div1' style='margin-left: 60px;'>
                    <img id="zoom_01" src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Austin_Healey_3000_red_vl.jpg/800px-Austin_Healey_3000_red_vl.jpg' width="300" data-zoom-image="http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Austin_Healey_3000_red_vl.jpg/800px-Austin_Healey_3000_red_vl.jpg"/>
                </div>
            </div>
            <div id="fragment-2">
                <div id='Div2' style='margin-left: 60px;'>
                    <img id="no_zoom" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Austin-Healey_3000_at_2010_Ottawa_British_Auto_Show.jpg/800px-Austin-Healey_3000_at_2010_Ottawa_British_Auto_Show.jpg" />
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
    $("#tabs").tabs({ show: { effect: "blind", duration: 500} });

    jQuery(document).ready(function () {
        $("#accordion").accordion({ active: 0 });
        $("#zoom_01").elevateZoom({
            zoomWindowWidth: 300,
            zoomWindowHeight: 300,
            scrollZoom: true,
            easing: true,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            zoomWindowPosition: 1,
            zoomWindowOffetx: 10
        });
    });


    $('#tabs').click('tabsselect', function (event, ui) {
        event.preventDefault();
        if ($("#tabs").tabs('option', 'active') > 0)
            $(".first").addClass("hide")
        else
            $(".first").removeClass("hide")
    });

</script>
</body>
</html>

Please clarify the question. What is the desired behavior? What do you want to take place on tab / fragment 1? What do you want to take place on tab /fragment 2? What does *breaks when I change tabs* mean? Be very specific. — random_user_name, Mar 01 '14 at 23:17
I want the zoom function to work on #fragment-1 only. Additional #fragments would have static content. When the page loads the zoom works properly, however when you select #fragment-2 and mouse over the crosshair and the zoom image appear over the content. At that point the tabs ui 'breaks' too and no longer works. Sorry for the lack of specificity. — user3093812, Mar 01 '14 at 23:40
So, do you want to *unbind* the elevateZoom from the image when the user clicks on a different tab? And then *rebind* when / if they click the first tab again? — random_user_name, Mar 02 '14 at 15:30

score 1 · Answer 1 · answered Mar 01 '14 at 03:58

1

Simply bind the elevatZoom function to multiple elements, and you should be good to go:

$("#zoom_01, #zoom_02").elevateZoom({
        zoomWindowWidth: 300,
        zoomWindowHeight: 300,
        scrollZoom: true,
        easing: true,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        zoomWindowPosition: 1,
        zoomWindowOffetx: 10
    });

Better yet, give your images a class of zoom (or similar), and you can change your selector to be easier to work with:

$(".zoom").elevateZoom({

answered Mar 01 '14 at 03:58

random_user_name

25,694
7
76
115

That gives the same results. Perhaps I wasn't clear. I only want the elevate-zoom to operate on panel (0). – user3093812 Mar 01 '14 at 04:13
Edited #zoom_02 to #no_zoom. – user3093812 Mar 01 '14 at 18:48

user3093812 · Answer 2 · 2014-03-02T22:50:23.770

0

This seems to be the best solution I could find to the above problem, seems to work well:

    $('#tabs').click('tabsselect', function (event, ui) {
    if ($("#tabs").tabs('option', 'active') > 0) {
        $('.zoomContainer').remove();
    } else {
        $("#zoom_01").elevateZoom({
            zoomWindowWidth: 300,
            zoomWindowHeight: 300,
            scrollZoom: true,
            easing: true,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            zoomWindowPosition: 1,
            zoomWindowOffetx: 10
        });
    }
});

edited Mar 02 '14 at 22:50

answered Mar 02 '14 at 22:41

user3093812

1
2

Thanks to [mark-s](http://stackoverflow.com/users/1961198/mark-s) for his answer found [here](http://stackoverflow.com/questions/21490554/bind-a-jquery-image-zoom-effect-to-onclick). – user3093812 Mar 02 '14 at 22:46

elevate-zoom in jquery tabs

2 Answers2