HTML 5 Need Some Help!

So, I’ve been looking into HTML5 based gallery. I’m nowhere close to web developer, and all I can really do is find some pre-made template or sample and then take the elements off of them to put together for my needs. The first step is to google, and finding something closest to what I like, then read through the code to figure out what needs to be fixed, in order to make change to mine.

The first step, Google Search, and I found this template on this site.

Now, I looked through the CSS, index.html, and contents of folders, and start making some changes. After playing around with the template for a while, I figured out most of the key components and tried making some changes just to test them out. and here’s the result

and… I stuck. I can put all the pictures that I want to add to the gallery in the image folder, (and the thumbnail to the thumbnail folder), and then keep adding the line with corresponding image file name to the index.html

<div class=”container”>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/1.jpg” alt=”images/1.jpg” class=”thumb” /></a></div>

</div>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/2.jpg” alt=”images/2.jpg” class=”thumb” /></a></div>

</div>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/3.jpg” alt=”images/3.jpg” class=”thumb” /></a></div>

</div>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/4.jpg” alt=”images/4.jpg” class=”thumb” /></a></div>

</div>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/5.jpg” alt=”images/5.jpg” class=”thumb” /></a></div>

</div>

<div class=”content”>

<div><a href=”#”><img src=”images/thumbs/IMAGE.jpgalt=”images/IMAGE.jpg /></a></div>

</div>

</div>

 

If it’s only 10 or so pictures, it’s not a problem hard coding the image name into the index.html file. However, if I want to keep adding files to the folder, this will be a quite a work…

so, the question is how can I script this so that as long as I have file in the image folder, I don’t have to hard code them into the html file…

I’ve been searching, and searching, and cannot find anything close to what I want to do…
does anyone have idea???

3 thoughts on “HTML 5 Need Some Help!”

  1. well… this is easy and hard ..
    as far as I know, HTML5 is static, which means whatever coded in is coded in and stays like that forever, that’s why you need to manually add those pictures into it. If you want something more “automatic”, you’ll need to use dynamic webpages that is actually a program gets executed to produce the HTML file every time someone visits your site.

    I’m not sure what kind of dynamic web programming your host services supports, but they are usually either php, jsp or asp. The other way to do it is to write an AppleScript (awwwww….) to produce this chunk of code whenever you add new pictures in, and then you can just copy-paste.

    Hope this helps. let me know if it’s not clear… and you should look at my “beautiful legacy antique” website ; P

Leave a Reply to Yuchen Zhang Cancel reply

Your email address will not be published. Required fields are marked *