Solved

Web gallery

Posted on 2011-03-16
3
372 Views
Last Modified: 2012-05-11
Hi,

I'm looking for the most effective way to develop a gallery website based on these requirements.

1. I have 1000 images 300x250px and 700x650.
2. I want to display 3 images per row and add a hover effect so that the large image is displayed when a user hover over the image.
3. I want to link each image to a URL and specify the under the image as well as a category.
4. Provide users with an ability to search for images based on categories.

Here's my current approach.

Create 2 separate folders, separate the images based on size and then by category.
Create a template consisting of 3 rows
Generate code automatically by inserting a URL and image location for each category and paste/replicate for each
Use a search plugin & add hover effect

Is there an easier way of getting this done? Is there a template where I can upload images with a csv to associate it with each image?

Looking for the quickest solution to build this. Preferably in 3 hours maximum.

Thank you
0
Comment
Question by:faithless1
3 Comments
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 35156406
There are lots of image gallery scripts, and a Google search will find them by the hundreds.  IIRC, Coppermine is one name that is well thought of.  I can also tell you from my own experience that JAlbum is a good tool.  Open-source web site frameworks (Wordpress, Joomla, Drupal) usually have plug-ins that you can tailor.

Depending on whether you are flexible with your requirements, you may be able to customize something based on one of the open-source modules.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35158392
Another way to do it is to consider installing WordPress and then adding one of the many excellent gallery plugins for it such as NextGen.

The advantage to WordPress is that it is incredibly easy to use and install and has all of the features you want above.  
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 35159155
Here is a simple solution.

Check the sample implementation at

http://www.iascbrevard.com/mothersdaypictures.php

1. All Files are dumped in a one directory.
2. For each image - an thumbmail file is created with T_ prefix, regular full size image has prefix R_
    For creating these, I used the EastThumbNail software
    http://www.fookes.com/ezthumbs/

3. PHP script reads the directory (only T_*.* files) and spits out the scroller.[marquee tag)

4. Simple javascript functions, changes the image in the main viewer area.

function ShowImage(tImgTag) {

      var rImgTag = document.getElementById('rImage');

      if (!rImgTag) { return; }

      rImgTag.src = tImgTag.src.replace ('T_', 'R_');

}



I have another flex based image gallery at

http://javascriptjournal.com/ws/?p=25


0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

790 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