• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5243
  • Last Modified:

photo album with php, ajax and mysql, how to deal with the images, loading with ajax?

Ok, I would like to use ajax for my web photo album. I am going to have a Album section, thumbnail section and large image panel. I am using on the server side PHP.
Is it possible to send images through ajax? Or can I only send xml, string format with Ajax?
Or do I have to preload all the images to the client side. That would be very slow.

Assuming that I have a total of 200 images. What would be the best way to deal with javascript, php, and mysql?
Should I preload? if so how many? I would just try to find the best efficient way to do this.
Hope we get some good ideas here:)
I am just confused, and I have not found any way to send images through ajax.

Thanks for any reply and help.

Regards
0
christian1234
Asked:
christian1234
2 Solutions
 
rangasumanCommented:
The reason AJAX is so hot these days is because it can get information from the server with out reloading the entire page. It definitely has its shortcomings which are not entirely supported like caching etc. Ajax can load images and you dont need to preload them. I would suggest you to make good use of AJAX and not for unnecessary effects in your page. The way to send images through ajax is simply passing the path to the image on your website and the browser will automatically download the image from your server. I would suggest you to go through this tutorial for more information.
http://www-128.ibm.com/developerworks/xml/library/x-ajaxslideshow/
0
 
mark_dhCommented:
By using a preload comment you are essentially not using AJAX to it's fullest potential. The best way to do this is the following:

Load your page without loading any content with the exception of 1-3 thumbnails.
When a user clicks next or something like that using AJAX load the rest of the content.

Here is the code for an AJAX loader I found somewhere:

<script type="text/javascript">
function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}
//-->
</script>

Also to load the actual page:

<div id="advert">
LOADING...
<script type="text/javascript">
ajaxLoader("adblock.php",'advert')
</script>
</div>

All the actual processing work is done by adblock.php in the background.
0
 
christian1234Author Commented:
Thank you for the help. This is was I was looking for.
I just thought there might be a different way to get the images through ajax.
Guess the old traditional way is working.
Best Regards,
Christian
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now