I am trying to implement this JqueryGallery to my website(big gray box). Now my problem is that the images doesn’t appear.
Here my website
here is my header code:
<link href="css/galleryview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 655,
panel_height: 336,
transition_speed: 1500,
transition_interval: 5000,
nav_theme: 'dark',
border: '1px solid white',
pause_on_hover: true,
});
});
</script>
Here is my gallery code:
<div id="photos" class="galleryview">
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/02.jpg" />
<div class="panel-overlay">
<h2>Eden</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/03.jpg" />
<div class="panel-overlay">
<h2>Snail on the Corn</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>. View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/04.jpg" />
<div class="panel-overlay">
<h2>Flowers</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>. View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="http://spaceforaname.com/img/gallery/06.jpg" />
<div class="panel-overlay">
<h2>Alone Beach 2B</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>. View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>
</div>
</div>
</div>
Glad you figured it out. But just for your information, to take advantage of the new script 2.1.1: your code should look like:
As you can see, the code is cleaner and it’s more HTML-wise semantically correct (look up on Divitis) so it might be worth upgrading. 🙂