I’m utilizing jQuery GalleryView for a website and I’m having a problem with it showing up. I have two different pages that use it. Within Firefox they will only seem to work after I switch between the two or refresh a couple of times, and even then it’s a crapshoot. In IE, they never work, one of the pages briefly flashes the content in rough form during load but then goes blank.
These both work 100% of the time when testing through Dreamweaver to Firefox, and don’t work through Dreamweaver to IE.
Here is my Javascript and some of my html code for both pages.
Page 1:
//Javascript
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.custom/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.galleryview-3.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ourEndorsements").galleryView({
show_filmstrip: false,
show_filmstrip_nav: false,
pause_on_hover: true,
transition_speed: 800,
transition_interval: 3200,
panel_width: 894,
panel_height: 390,
});
});
</script>
//HTML example
<ul id="ourEndorsements">
<li>
<div class="gv-panel-content">
<h3>Endorsement #1</h3>
<div class="content-left">
Text Content
</div>
<img class="content-img" src="img/boat_small.jpg" />
</div>
</li>
</ul>
Page 2:
//Javascript
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.custom/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="Scripts/galleryview-3.0b3/js/jquery.galleryview-3.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ourServices").galleryView({
filmstrip_position: 'left',
show_filmstrip_nav: false,
show_panel_nav: false,
frame_width: 175,
frame_hieght: 30,
pause_on_hover: true,
transition_speed: 600,
transition_interval: 3000,
panel_width: 694,
panel_height: 420,
});
});
</script>
//HTML
<ul id="ourServices">
<li>
<span class="Services_title">Adoption</span>
<div class="gv-panel-content">
<h3>Adoption</h3>
<div class="content">
Text Content
</div>
<img class="content-img" src="img/path_small.jpg" />
</div>
</li>
</ul>
Might anyone know what’s causing these problems? I have tried tooling around with a few things such a the transition speed and transition interval but nothings seems to make this work like it should.