?
Solved

Photo gallery javascript with thumbnails

Posted on 2008-11-14
10
Medium Priority
?
2,203 Views
Last Modified: 2012-05-05
I am looking for a photo image gallery similar to cars.com

http://www.cars.com/go/search/detail.jsp;?tracktype=usedcc&searchType=21&pageNumber=0&numResultsPerPage=50&largeNumResultsPerPage=0&sortorder=descending&sortfield=PRICE+descending&certifiedOnly=false&criteria=K-%7cE-%7cM-_1_%7cN-N%7cR-30%7cI-1%2c7%7cP-PRICE+descending%7cQ-descending%7cZ-10314&aff=national&paId=292115828&recnum=2&leadExists=true 

I can't seem to find anything that does the trick.  I am loading the images from the server using Coldfusion.  I would like to crop the thumbs and then one click to display the image.  And then have that larger preview image be linkable.

Thanks.
0
Comment
Question by:tags266
  • 4
  • 3
  • 3
10 Comments
 
LVL 16

Expert Comment

by:Robin
ID: 22962183
0
 
LVL 16

Assisted Solution

by:Robin
Robin earned 600 total points
ID: 22962237
0
 
LVL 6

Accepted Solution

by:
James Looney earned 1400 total points
ID: 22962242
I just used some rubbish pics from the net for this.

So you'd want your coldfusion to build this, but here is the HTML and small JavaScript you'd want. Throw it in a .html file and open in your browser - click on the small images

<html>
<head></head>
<body>
 
<img src="http://www.modernlifeisrubbish.co.uk/images/illustrations/google-as-a-giant-robot.jpg" name="large" width="200">
<hr>
<img src="http://www.nearby.org.uk/geograph/GoogleEarth_Image_BI2.jpg" onClick="change_large(this.src);" width="75">
<img src="http://laughingsquid.com/wp-content/uploads/fsm-google-doodle.png" onClick="change_large(this.src);" width="75">
 
<script language="JavaScript">
function change_large(src_url)
{
	document['large'].src = src_url;
}
</script>
</body>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:tags266
ID: 22962368
robinu,

I tried out http://www.monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails earlier and found that it doesn't resize the thumbs..only crops.  This would be fine if i make all copies of the pics as thumbs but i was hoping i'd be able to resize the thumbs Javascript...
0
 
LVL 6

Expert Comment

by:James Looney
ID: 22962637
that's a good lookin one. should be a way to modify it.
0
 
LVL 16

Expert Comment

by:Robin
ID: 22962858
On the bottom part of that page, he describes how to use this gallery show the thumbnails resized instead of cropped.
0
 

Author Comment

by:tags266
ID: 22962984
jimjo95,
 Yours seems easiest so far to implement for my needs.  Any easy way to either make the main large image fade when the separate thumbs are created?  Also, any way to add a border around the thumb that was just clicked?
0
 

Author Comment

by:tags266
ID: 22962992
robinu,

i did look into the fix with the cropping but couldn't seem to implement.  There was no clear example.  I'm probably going to bypass that solution.  You have earned some points though already as you've been helpful.  THank you.
0
 
LVL 6

Expert Comment

by:James Looney
ID: 22963390
Here ya go. I took the StuNichols one and modified it so it shows the full image as the thumb. It won't let me upload the whole zip here even though it is small, so click here to download:

http://staging30.acuityweb.com/simple.zip

Download it, and drop the whole folder in your /www/  then go to:
http://youdomain.com/simple/simple.html
0
 

Author Closing Comment

by:tags266
ID: 31516949
Thanks.  you've been helpful.  I took your bare bones javascript tag jimjo, and have added my own custom css classes with it.  
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question