Solved

Javascript (ajax or jquery) to get image from folder and display on a web page

Posted on 2014-10-05
4
1,236 Views
Last Modified: 2014-10-31
Hi,

I have this page: http://petmark.org/Pet/141/Beagle.html
On this page I have a photo gallery. The problem that I have is that when the page load I get all the images full size. Because of this I the page size has increase very much. I would like to have a very small thumbnail and when I click on it only then to get the full image!

How can I make this using php and javascript (ajax or jquery)?
Is this posible? Is there a tutorial for this problem?

Thank you!
0
Comment
Question by:Qw M
[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
4 Comments
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40362345
I'd like to suggest a change in the design pattern.  Consider something more like a standard Photo Gallery design, perhaps something like Coppermine or similar.  In this design you store two versions of the image in two different directories.  In the "big pictures" directory you would store the finished images, sized to the appropriate dimensions for use in the popup modal window.  This is where you keep something like:
http://petmark.org/public/admin/PETPICTURES/dog/%28dog%29Beagle1.jpg

Then in a separate directory, you store the "thumbnail" images that look like this.Thumbnail image of a beagle  If you have the image file names the same, and only the directory paths different, it's very easy to keep your work organized this way.  If you need a PHP script that will take a full-size image and create a thumbnail, please post back and I'll be glad to give you the code.  Overall, if you can use Photoshop to make the thumbnails you will get better quality images.

There's a little more about handling online images in this article:
http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/A_5931-Putting-Your-Photos-Online.html
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40362530
if you store your image on a service like cloudinary, you can easily have thumbnail of your picture, check this page for example : http://cloudinary.com/documentation/imagga_crop_and_scale_addon
0
 
LVL 58

Expert Comment

by:Gary
ID: 40416381
I've requested that this question be closed as follows:

Accepted answer: 500 points for Ray Paseur's comment #a40362345

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 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