Help with web gallery

**Defender90** · 09-11-2010, 11:47 AM

Hi,

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.

**azoomer** · 09-11-2010, 12:01 PM

on the site you link to, they are using a script from dynamic drive
http://www.dynamicdrive.com/dynamici...tentslider.htm
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).

**Defender90** · 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?

Thanks

**azoomer** · 09-16-2010, 08:11 PM

Here is an example of how you can use the above mentioned script for your purpose

DEMO

The html looks like this

Code:

<!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" lang="en" xml:lang="en">
<head>
<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
***********************************************/

</script>

</head>

<body>

<!--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>

<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>


</div>

<script type="text/javascript">

featuredcontentslider.init({
	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)
	}
})

</script>
</body>
</html>

you can download the css here
and the javascript here

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

**Defender90** · 09-21-2010, 05:56 PM

GREAT!
Thank you very much for the help. I will give it a try and let you know.

Thread: Help with web gallery

Thread Tools

Search Thread

Help with web gallery

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions