Hello again,
Using the ImageNavigator plugin to create an interactive map I have stumbled upon another problem. The loading.gif (or the loading message) is only displayed on the first <div> that is using the plugin. To show you what I mean here are some parts of my code:
HTML:
<script type="text/javascript">
$(function(){
$("#navPeloponesse,#navCrete,#navIonian_islands,#navEpirus,#navAegean_islands").imageNavigator(
{
areaWidth: 640,
areaHeight:640,
draggerStyle:"2px groove red",
navOpacity:.8
})
})
</script>
[some code]
<div id="navCrete">
<div class="imagesContainer {imageUrl:'zoom/crete1.jpg', navPosition:'BR', navWidth: 100}" style="z-index:0;"></div>
</div>
<div id="navPeloponesse">
<div class="imagesContainer {imageUrl:'zoom/peloponesse1.jpg', navPosition:'BR', navWidth: 100}" style="z-index:0;"></div>
</div>
<div id="navIonian_islands">
<div class="imagesContainer {imageUrl:'zoom/ionian_islands1.jpg', navPosition:'BR', navWidth: 100}" style="z-index:0;"></div>
</div>
<div id="navEpirus">
<div class="imagesContainer {imageUrl:'zoom/epirus1.jpg', navPosition:'BR', navWidth: 100}" style="z-index:0;"></div>
</div>
<div id="navAegean_islands">
<div class="imagesContainer {imageUrl:'zoom/aegean_islands1.jpg', navPosition:'BR', navWidth: 100}" style="z-index:0;"></div>
</div>
jquery
[some code]
$("#navPeloponesse,#navCrete,#navIonian_islands,#navEpirus,#navAegean_islands").hide();
[some code]
$("#mypeloponesse").click(function(){$("#navPeloponesse").fadeIn("fast");})
$("#mycrete").click(function(){$("#navCrete").fadeIn("fast");})
[more code]
Now, using the current code, the loading.gif is only displayed when navCrete is shown (which is the first div in the HTML code, that uses the plugin). If I switch the order of the <div>s so that for example navPeloponesse is loaded first then it will be displayed only there. I 've also tried using a "master div" that uses the plugin and contains all other divs but nothing changed.
I would appreciate your help once again.
asked
Apr 11 '11 at 09:47
AresGR
1●1