Hello guys,
I fell in love with this jQuery gallery called GalleryView, but I have no idea how to install it.
I have tried several times, but i just don’t know what to do with the .js files, now do I know how to customize this project to fit my website (it is currently too wide to fit my webpage).
I would like to customize it to look like this (with less width of course).
If anyone can offer any help, I will appreciate it very much.
The first thing you do—of course—is download the files that are supplied.
Then upload them to a folder (your root folder or otherwise).
In that folder you create an index.html (or any file, that’s just an example).
In that file, you place code sometthing like this (taken from the example page you linked to):
<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery GalleryView - by Jack Anderson</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="jquery.timers-1.1.2.js"></script>
<style type="text/css">
body {
background: #444;
color: white;
}
#gallery_wrap {
width: 820px;
height: 368px;
padding: 25px;
background: url(img/border.png) top left no-repeat;
}
a:link,a:visited {
color: #ddd !important;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 38,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
overlay_height: 52,
filmstrip_position: 'top',
overlay_position: 'top'
});
});
</script>
</head>
<body>
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel">
<img src="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="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="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="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="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 class="panel">
<img src="img/gallery/05.jpg" />
<div class="panel-overlay">
<h2>Sunrise Trees</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>. View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/07.jpg" />
<div class="panel-overlay">
<h2>Waterfall</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>. View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/08.jpg" />
<div class="panel-overlay">
<h2>Death Valley</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>. View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>
</div>
</div>
<ul class="filmstrip">
<li><img src="img/gallery/frame2-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame2-02.jpg" alt="Eden" title="Eden" /></li>
<li><img src="img/gallery/frame2-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
<li><img src="img/gallery/frame2-04.jpg" alt="Flowers" title="Flowers" /></li>
<li><img src="img/gallery/frame2-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
<li><img src="img/gallery/frame2-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
<li><img src="img/gallery/frame2-07.jpg" alt="Waterfall" title="Waterfall" /></li>
<li><img src="img/gallery/frame2-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>
</div>
</div>
</body>
</html>
All of the links and images in there will be wrong, but that’s where you start replacing them with your own.
Then you can get on to styling to suit.
Perhaps make a start and then report back when you’ve got a page you need help with.
Of course, your could put the scripts in a separate folder called /js/ or /scripts/ etc and then change the file paths. This is just one way to go about it.
Essentially, you need links to all the relevant js and css files on your gallery page.
Actually, that information above probably won’t be much use. In the download files, looks for README.txt. That gives an explanation of how to set things up. If those instructions are too confusing, it might be better to start with something simpler, or try a few jQuery tutorials first to get an idea of how it all fits together.
Hello ralph, thanks for replying.
I tried the method you explained in the first reply but that didn’t work. I had checked his source codes, and downloaded all the .css and .js files, linked them, and also copied all the HTML on the page. I still seem to be missing something.
The README.TXT is unintelligible to me 