Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-10-05
4
Medium Priority
?
1,315 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
3 Comments
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 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 83

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

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.
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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 …
Suggested Courses

824 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