Ask questions and get good answers on mb.jQuery.components

Problem with mbimageNavigator

1

hi, i have implemented the mbimagenavigator in some some sort of a tabbed content it's all good till a switch the tab, then refresh and then go back to the tab with the imageNavigator. It seems something is bugged and it seems that it needs a redraw. because the loader is shown and I don't see the navigator itself, only the targeted image. if I double click twice on the image the navigator show itself, but the loader is still visible

any ideas will be appreciated. i though on the possibility to unset the plugin (like using some sort of destroy like in widget factory) and then initiate it again.

asked Nov 02 '10 at 06:38

goldy's gravatar image

goldy
13●3

edited Nov 02 '10 at 12:03

2 Answers:
oldestnewestmost voted
0

Hi, I don't know which tabset component are you using, but it for sure uses javascript to work; any further manipulation of the DOM structure once the mbImageNavigator is initialized create conflicts; the best way (or better the way I would adopt) is to load the imageNavigator each time you click on its tab via Ajax:

  1. Create a specific page for the mbImageNavigator with all the javascript needed for its initialization.
  2. Add a callback function to the tab click that loads the created page into the tab container.

Bye, Matteo

answered Nov 02 '10 at 16:48

Matteo%20Bicocchi's gravatar image

Matteo Bicocchi ♦♦
1776●1●2●9
0

hm, ok i have done it with jqueryUi tabs, and implemented a loading specific tab in the select event also the code for init for imgNav I've put in the same file in document ready function

<div id="imageBig">
    <div id="imageBigNav" original-title="Double click to fit to viewable area" class="tooltip-n">
        <div style="display:none;"  class="imagesContainer {imageUrl:'/gallery/true/testimage.jpg', navPosition:'BR',  navWidth:'100', NavCoordinates:'10,10'}" >

        </div>
    </div>

</div>
<script type="text/javascript">
$(document).ready(function(){
    if(navigator.userAgent.indexOf('Chrome')!=-1){
        var src = $("#imageBig").find("#imageBigNav").find(".imagesContainer").metadata().imageUrl;
        $("#imageBig").append( $('<img src="'+src+'" >') );
    }
    else{
        $("#imageBigNav").imageNavigator( {
            areaWidth: 750,
            areaHeight:420,
            draggerStyle:"1px dotted red",
            navOpacity:.8

        });
    }
});
</script>

AND it works, i want to escape this method, but never-mind, thanks for the idea

answered Nov 03 '10 at 05:07

goldy's gravatar image

goldy
13●3

edited Nov 03 '10 at 05:08

Your answer
toggle preview

jQuery main site - Matteo Bicocchi