generate gallery image list from a folder?

@AliasJaneDoeDec 27.2009

I want a gallery that’s VERY easy to update and re-order images. I know with flash it’s possible to just stick your images in a folder and it will automatically make the gallery from that folder. But I don’t want to use flash. Is there an alternative way?

to post a comment

JavaScript

24 Comments(s) _↴

@justinbarneskinDec 28.2009 — #http://www.webdeveloper.com/forum/showthread.php?t=221606

@AliasJaneDoeauthorDec 28.2009 — #Yes! This is totally what I meant:

http://www.javascriptkit.com/javatutors/externalphp2.shtml

But is there any way to make it generate something other than an array? Such as, my code uses main images and thumbnails, rather than a slideshow, and I'd like this to generate the list for that. My list needs to be like this:

[CODE]
 <li class="active"> <a href="1.jpg"><img src="1thumb.jpg"></a></li>
 <li><a href="1a.jpg"><img src="1athumb.jpg"></a></li>
 <li><a href="1b.jpg"><img src="1bthumb.jpg"></a></li>
 <li><a href="2.jpg"><img src="2thumb.jpg"></a></li>[/CODE]

And so on.

Is this possible?

@justinbarneskinDec 28.2009 — #You can make it happen with javascript or, start learning PHP and bring this to that forum.

Choose?

@WolfShadeDec 28.2009 — #The array is probably your best bet; especially if the full size image filenames are only slightly different than the thumbnail image filenames (even better if they have the same name but are in different directories.) Then you can loop through the array, placing the full size image filename in the anchor and the thumbnail image filename as the IMG source.

^{^_^{^}}

@AliasJaneDoeauthorDec 29.2009 — #The array is probably your best bet; especially if the full size image filenames are only slightly different than the thumbnail image filenames (even better if they have the same name but are in different directories.) Then you can loop through the array, placing the full size image filename in the anchor and the thumbnail image filename as the IMG source.

^{^_^{^}}[/QUOTE]

Same names, different directories is fine. Although I'm afraid I'm too much of a newbie to be able to figure out how to loop through the array.

@AliasJaneDoeauthorDec 29.2009 — #You can make it happen with javascript or, start learning PHP and bring this to that forum.

Choose?[/QUOTE]

Ummm... *scratches head* I've really no idea. I'm not exactly skilled at javascript either. Would doing it with php be better?

@WolfShadeDec 29.2009 — #Same names, different directories is fine. Although I'm afraid I'm too much of a newbie to be able to figure out how to loop through the array.[/QUOTE]
This might help with the array questions:

http://www.w3schools.com/JS/js_obj_array.asp

Use the samples they have and you should have no problem learning how to create and loop through an array.

^{^_^{^}}

@AliasJaneDoeauthorDec 29.2009 — #Thanks, I understand more about arrays now. However, I still can't figure out how to make it work without telling it to get each element, and that won't work if I change the number of images I want to use.

Here's a test gallery that I've set up (without my failed attempts at using an array):

http://www.different-dimension.com/AliasJaneDoe/kittens/images.html

I understand how to generate the array (thanks to that earlier link), but not how to implement it.

@justinbarneskinDec 30.2009 — #The main images are not so big. You might consider doing away with the thumbs and scaling the large images?

@AliasJaneDoeauthorDec 30.2009 — #The main images are not so big. You might consider doing away with the thumbs and scaling the large images?[/QUOTE]

Actually, my main images will be big. These were just some pics I grabbed off google to use as tests since my images aren't ready yet.

@justinbarneskinDec 30.2009 — #Well, lets see if we can get you started onto javascript. In your source code,

find all of this---

[code=html]<ul id="mycarousel" class="jcarousel-skin-tango">
 <li class="active"> 
 
 <a href="images/1.jpg"><img src="thumbs/1.jpg"></a></li>
 
 <li><a href="images/2.jpg"><img src="thumbs/2.jpg"></a></li>
 
 <li><a href="images/3.jpg"><img src="thumbs/3.jpg"></a></li>
 
 <li><a href="images/4.jpg"><img src="thumbs/4.jpg"></a></li>
 
 <li><a href="images/5.jpg"><img src="thumbs/5.jpg"></a></li>
 
 <li><a href="images/6.jpg"><img src="thumbs/6.jpg"></a></li>
 
 <li><a href="images/7.jpg"><img src="thumbs/7.jpg"></a></li>
 
 <li><a href="images/8.jpg"><img src="thumbs/8.jpg"></a></li>
 
 <li><a href="images/9.jpg"><img src="thumbs/9.jpg"></a></li>
 
 <li><a href="images/10.jpg"><img src="thumbs/10.jpg"></a></li>
 
 <li><a href="images/11.jpg"><img src="thumbs/11.jpg"></a></li>
 
 <li><a href="images/12.jpg"><img src="thumbs/12.jpg"></a></li>
 
 <li><a href="images/13.jpg"><img src="thumbs/13.jpg"></a></li>
 
 <li><a href="images/14.jpg"><img src="thumbs/14.jpg"></a></li>
 
 <li><a href="images/15.jpg"><img src="thumbs/15.jpg"></a></li>
 
 <li><a href="images/16.jpg"><img src="thumbs/16.jpg"></a></li>
 
 <li><a href="images/17.jpg"><img src="thumbs/17.jpg"></a></li>
 
 <li><a href="images/18.jpg"><img src="thumbs/18.jpg"></a></li>
 
 <li><a href="images/19.jpg"><img src="thumbs/19.jpg"></a></li>
 
 <li><a href="images/20.jpg"><img src="thumbs/20.jpg"></a></li>
 
 <li><a href="images/21.jpg"><img src="thumbs/21.jpg"></a></li>
 
 <li><a href="images/22.jpg"><img src="thumbs/22.jpg"></a></li>
 
 <li><a href="images/23.jpg"><img src="thumbs/23.jpg"></a></li>
 
 <li><a href="images/24.jpg"><img src="thumbs/24.jpg"></a></li>
 
 <li><a href="images/cat.gif"> <img src="thumbs/cat.jpg" width="85" height="85"></a></li>
 
 
   </ul>
 [/code]

Ok, highlight that all and delete it. Copy and paste this where all that was....

[code=html]<SCRIPT type="text/javascript">
 var kittys='<ul id="mycarousel" class="jcarousel-skin-tango"><li class="active">'
 for(i=1;i<25;i++){kittys+='<a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}
 document.write(''+kittys+'<li><a href="images/cat.gif"><img src="thumbs/cat.jpg" width="85" height="85"></a></li></ul>')
 </SCRIPT>
 [/code]

Does the HTML still display the same now?

@AliasJaneDoeauthorDec 30.2009 — #
Does the HTML still display the same now?[/QUOTE]

Nope. I lost all the thumbnails but the first one.

@justinbarneskinDec 30.2009 — #?

<SCRIPT type="text/javascript">

var kittys='<ul id="mycarousel" class="jcarousel-skin-tango">'

for(i=1;i<25;i++){

if(i===1){kittys+='<li class="active"><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}

else{kittys+='<li><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}}

document.write(''+kittys+'<li><a href="images/cat.gif"><img src="thumbs/cat.jpg" width="85" height="85"></a></li></ul>')

</SCRIPT>

@AliasJaneDoeauthorDec 30.2009 — #:confused:

<SCRIPT type="text/javascript">

var kittys='<ul id="mycarousel" class="jcarousel-skin-tango">'

for(i=1;i<25;i++){

if(i===1){kittys+='<li class="active"><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}

else{kittys+='<li><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}}

document.write(''+kittys+'<li><a href="images/cat.gif"><img src="thumbs/cat.jpg" width="85" height="85"></a></li></ul>')

</SCRIPT>[/QUOTE]

That seems to work! (haven't cross-browser tested it, but it works in Firefox) Although I don't need the part for cat.gif since that was just a test, so I deleted that. And I've added title=" " to the main images to prevent it saying undefined, but I don't know how to include that in this.

But my main problem is that I need to edit this if I change the number of images I want to use, and if I want to add an image between 1 and 2, I need to rename all the others because I can't just stick in a 1b. I think the solution to this is to have the php generate the array contents by reading them from the folder (such as in that earlier link) and have your script call that. Is that possible?

@AliasJaneDoeauthorDec 30.2009 — #Sorry, accidental double post. How can I delete this?

@justinbarneskinDec 30.2009 — #Place this in the head as you are familiar with, direct it to what folder the .php is in

<script src="pics/getimages.php"></script>

at the top line of the bit of code I had you insert add this-

alert(galleryarray.length)

This to see that all is ready to finish off this project

@justinbarneskinDec 30.2009 — #Its going to be something like this...

[code=html]<SCRIPT type="text/javascript">
 var kittys='<ul id="mycarousel" class="jcarousel-skin-tango">add unique code here'
 for(i=0;i<galleryarray.length;i++){
 kittys+='<li><a href="images/'+galleryarray[i]+'.jpg"><img src="thumbs/'+galleryarray[i]+'.jpg" alt="'+galleryarray[i]+'"></a></li>'}
 document.write(''+kittys+'<li><a href="images/cat.gif"><img src="thumbs/cat.jpg" width="85" height="85"></a></li>add more unique code here</ul>')
 </SCRIPT>[/code]

if the thumbs and large images are named the same but are in different folders, there shouldn't be any problem. also you might leave off the .jpg extension in the code too

@AliasJaneDoeauthorDec 30.2009 — #Drat! I managed to completely mess something up when I was trying to remove the captions, because now even the code that was working isn't anymore. And I've no idea which edit caused the problem (since I was working on it without the array generating the image list and so didn't see when it stopped working).

Here's the working page with the old image list:

http://www.different-dimension.com/AliasJaneDoe/kittens/images.html

And here's with your code that was working before but isn't now:

http://www.different-dimension.com/AliasJaneDoe/kittens2/images.html

@justinbarneskinDec 30.2009 — #You are having cache problems.

Save the code as a different name such as work1.htm

and every subsequent edit change it to work2.htm

until you get done. Then you'll have a dozen edits to delete off your desktop

@AliasJaneDoeauthorDec 30.2009 — #You are having cache problems.

Save the code as a different name such as work1.htm

and every subsequent edit change it to work2.htm

until you get done. Then you'll have a dozen edits to delete off your desktop[/QUOTE]

Are you not seeing the problems in the link I gave you? This one:

http://www.different-dimension.com/AliasJaneDoe/kittens2/images.html

I tried clearing my cache, but it's still all messed up. And yes, I should have been saving versions along the way, then I could back up to wherever I messed up.

I just don't understand why it still works fine without the array making the image list.

@justinbarneskinDec 30.2009 — #The arrow buttons don't work anymore?

@AliasJaneDoeauthorDec 30.2009 — #The arrow buttons don't work anymore?[/QUOTE]

Amongst other problems. Such as where did the "N" captions come from?

@AliasJaneDoeauthorDec 31.2009 — #I found where the strange "N" captions were coming from. It happened when I change a line in galleria.js from this:

[CODE]var _title = _a ? i + ":" + _a.attr('title') : i + ":" + _img.attr('title');[/CODE]

to this:

[CODE]
 var _title = _a ? i + _a.attr('title') : i + _img.attr('title');[/CODE]

Which I did to remove the colons from the captions, because changing my script from this:

[CODE]function mycarousel_initCallback(carousel) {
 jQuery('#main_image').bind('img_change',function() {
 var num = parseInt((jQuery('.caption').text()).split(":",3)[0])-3;
 carousel.scroll(num);
 return false;
 });[/CODE]

to this:

[CODE]function mycarousel_initCallback(carousel) {
 jQuery('#main_image').bind('img_change',function() {
 var num = parseInt((jQuery('.caption').text()).split(":",3)[0])-3;
 carousel.scroll(num);
 $('.caption').text($('.caption').text().substring(2));
 return false;
 });[/CODE]

didn't remove the colons on captions after ten. I dunno why not.

If I change back that line in galleria.js, the array works again. Meaning this one:

[CODE]<SCRIPT type="text/javascript">
 var kittys='<ul id="mycarousel" class="jcarousel-skin-tango">'
 for(i=1;i<25;i++){
 if(i===1){kittys+='<li class="active"><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}
 else{kittys+='<li><a href="images/'+i+'.jpg"><img src="thumbs/'+i+'.jpg" alt="'+i+'"></a></li>'}}
 document.write(''+kittys+'<li><a href="images/cat.gif"><img src="thumbs/cat.jpg" width="85" height="85"></a></li></ul>')
 </SCRIPT> [/CODE]

Any thoughts? Because killing those captions is equally important to me as getting the array to work.

@justinbarneskinDec 31.2009 — #LOL, My thought is to let WolfShade take over. As soon as I saw JQuery raise its ugly head,

I was hoping for a quick end to this or, a good reason to slink away. I don't know how anyone

can paste that stuff into their work with fingers crossed, only to find out they need to learn how to code with no shortcuts.

Also in #JavaScript _↴

JavaScript Cross Browser issue with FireFox JavaScript code not working in Netscape 3 Combo boxes

Success!

Help @AliasJaneDoe spread the word by sharing this article on Twitter...

Tweet This

generate gallery image list from a folder?

24 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

generate gallery image list from a folder?

24 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #JavaScript _↴