Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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,293 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 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 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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 …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

722 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