View Full Version : Help with web gallery

09-11-2010, 11:47 AM

I want to make this exact type of image view to use on my website. Can anyone tell me where I can find this or instructions on how to set up. I need the thumbs on the right and none of the photoshop ones will work.

Sorry for the dumb question but I'm a beginner.

Here is the example of what I want to do.

Thanks for your help.

09-11-2010, 12:01 PM
on the site you link to, they are using a script from dynamic drive
you are free to use the same script as long as the copyright note is intact (something they are forgetting on the page you link to).

09-16-2010, 05:49 PM
Thanks for the reply. I like how the thumbs are on the right. I couldn't figure it out using the code. I know photoshop cs3 has some web gallary builders but nothing like I need.
All I need is the thumbs on the right and for everything to be black. Do you know of a gallery builder I can get anywhere?


09-16-2010, 08:11 PM
Here is an example of how you can use the above mentioned script for your purpose

DEMO (http://azoomer.com/contentslidergallery%202/)

The html looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>thumbs to the right</title>

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more




<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider" class="sliderwrapper">

<div class="contentdiv" style="background: url(images/1.jpg) center left no-repeat"></div>
<div class="contentdiv" style="background: url(images/2.jpg) center left no-repeat"></div>
<div class="contentdiv" style="background: url(images/3.jpg) center left no-repeat"></div>
<div class="contentdiv" style="background: url(images/4.jpg) center left no-repeat"></div>
<div class="contentdiv" style="background: url(images/5.jpg) center left no-repeat"></div>
<div class="contentdiv" style="background: url(images/6.jpg) center left no-repeat"></div>


<div id="paginate-slider" style="background:white">

<a href="http://codingforums.com" class="toc"><img src="thumbs/thumb_1.jpg" /></a>
<a href="http://google.com" class="toc someclass"><img src="thumbs/thumb_2.jpg" /></a>
<a href="http://www.cssdrive.com" class="toc someotheclass"><img src="thumbs/thumb_3.jpg" /></a>
<a href="http://javascriptkit.com" class="toc someotheclass"><img src="thumbs/thumb_4.jpg" /></a>
<a href="http://www.cssdrive.com" class="toc someotheclass"><img src="thumbs/thumb_5.jpg" /></a>
<a href="http://javascriptkit.com" class="toc someotheclass"><img src="thumbs/thumb_6.jpg" /></a>


<script type="text/javascript">

id: "slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [false], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)


you can download the css here (http://azoomer.com/contentslidergallery%202/contentslider.css)
and the javascript here (http://azoomer.com/contentslidergallery%202/contentslider.js)

ps: you need to give the thumb images alt attributes if you want the page to validate

09-21-2010, 05:56 PM
Thank you very much for the help. I will give it a try and let you know.