Solved

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

Posted on 2014-10-05
4
1,033 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
4 Comments
 
LVL 108

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now