PDA

View Full Version : 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/dynamicindex17/featuredcontentslider.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 (http://azoomer.com/contentslidergallery%202/)

The html looks like this

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

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.