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.jpg” alt=”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???
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
awwwwww
I had feeling…. after long searching, I kind of start feeling that I need to do something more than html… the hosting service does support php, but I really don’t want to do that much… I rather right an applescript to add a line to the html when I add file to the folder… lol If you are so bored and have nothing to do, please feel free to write a php script to do the automated part… I heard that you are really busy though… i told you to stay in oxford, and have a nice easy life.. but you’ve never listened…
LOL I can’t agree more… should’ve listened to you, my hair is getting fewer and fewer, and I’m afraid before long I’ll be like my dad…