Solved

Web gallery

Posted on 2011-03-16
3
374 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 110

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 29

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

691 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