Jump to content

Loading Images From /images/ Folder


tinmarin
 Share

Recommended Posts

######@,I`m using a Lightbox(javascript) to display all images in my index page with this usually used code, of course:

<div id="dhtmlgoodies_slideshow"> <div id="galleryContainer"> <div id="arrow_left"><img src="images/arrow_left.gif"></div> <div id="arrow_right"><img src="images/arrow_right.gif"></div> <div id="theImages"> <div id="example"> <a href="http://xxxx/images/001_Reaching_For_The_Stars.jpg" rel="lightbox[mando]" id="image1" title=""><img src="http://xxxxx/images/001_Reaching_For_The_Stars.jpg" border="0" alt="" height="80" width="80" /></a> <div class="lightboxDesc image1">Image Description</div> <a href="http://xxxx/images/002.jpg" rel="lightbox[mando]" id="image1" title=""><img src="http://xxxxx/images/002.jpg" border="0" alt="" height="80" width="80" /></a> <div class="lightboxDesc image1">Image Description 2</div> <a href="http://xxxx/images/003.jpg" rel="lightbox[mando]" id="image1" title=""><img src="http://xxxxx/images/003.jpg" border="0" alt="" height="80" width="80" /></a> <div class="lightboxDesc image1">Image Description 3</div> <a href="http://xxxx/images/004.jpg" rel="lightbox[mando]" id="image1" title=""><img src="http://xxxxx/images/004.jpg" border="0" alt="" height="80" width="80" /></a> <div class="lightboxDesc image1">Image Description 4</div>..........................And so till 40 images..................................................................................................................div id="slideEnd"></div> </div> </div></div> <script type="text/javascript"> window.addEvent('domready',function(){ Lightbox.init({descriptions: '.lightboxDesc', showControls: true}); }); </script> <script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">var pageTracker = _gat._getTracker("UA-3333085-1");pageTracker._initData();pageTracker._trackPageview();</script>
The problem is that when i add more than 100 images i must add 100 of this code in the index page:
<a href="http://xxxx/images/100.jpg" rel="lightbox[mando]" id="image1" title=""><img src="http://xxxxx/images/100.jpg" border="0" alt="" height="80" width="80" /></a> <div class="lightboxDesc image1">Image Description 100</div>
This cause that my index page get too heavy and load very slow :) . So i tried to PHP to solve this problem adding this little code:
<?php $imagesDir = 'images/'; $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); echo json_encode($images);?>
But is not working. The images do not appear. I made something wrong? :)
Link to comment
Share on other sites

Using json_encode is not going to replace the HTML you've got, that produces a Javascript object. That's not going to affect the loading speed of the page, if you have 100 pictures on a page it doesn't matter how you output the code if the browser still needs to download 100 images. If you want to reduce the page size you need to put paging controls so that it only shows 20 or 30 pictures at a time.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...