Solved

Web gallery

Posted on 2011-03-16
3
371 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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The goal of the tutorial is to teach the user how to make his/her own presets while editing so it is easier to edit there photos. Create a preset you like and copy that setting then save it in to your presets folder.
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…

770 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