Loading Images From /images/ Folder

[tinmarin]

######@,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?

[justsomeguy]

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.