Web gallery without flash and server side sw

<p>I like this site's web gallery for a few reasons: thumbnails and enlargement on one page, great navigation to load more thumbnails for a large gallery, and just enough info about the gallery and each image.<br>

<a href="http://www.richturkphotos.com/EXHIBITS/TUFTS-EXHIBIT-SEPTEMBER-1-26/5580037_gUjJW#P-1- ">http://www.richturkphotos.com/EXHIBITS/TUFTS-EXHIBIT-SEPTEMBER-1-26/5580037_gUjJW#P-1-15</a><br>

Question: Is it possible to build such a gallery with html, css and javascripts *only*? IOW, without flash and without any server side sw. If possible, what level of programming skills are needed? Or, are there such templates or plugins available?</p>

<p>Robert, Yes you can build a gallery similar to the sample yourself. To start you on your way I highly recommend the book <em>Web Publishing with HTML and CSS</em> by Laura Lemay and Rafe Colburn. Though not entirely necessary a program such as Dreamweaver would be very helpful. The book will not tell you specifically how to build your gallery, but it will teach you what coding is necessary to do what you want to do. There are also many free javascripts online to help display photos. I've tried using templates, but found customizing them beyond the obvious, such as name and images, to be a waste of time and I was better off building my own from scratch. Server-side software would only be necessary if you included something such as a contact form on your site.</p>

<p>You can build a similar looking and working Web pages and galleries with embedded javascript (his makes extensive use of server-side scripts and Smugmug galleries), and there are examples out - I stole and adapted mine which is different but works similarly with mouse over/out. You can look at the source to extract the javascripts from some Web galleries, many of the photo Websites offer this as part of their design templates and some Web design applications will create them as you build the Web pages and galleries. As for level of skills, it depends on what you know, and how fast you learn.</p>

<p>I think the only problem with the example is that pre-loading fullsize and thumbnail images does take time, especially more than a dozen or so (37 in your example). I saved some time and load there by simply resizing the fullsize to a thumbnnail during the pre-loading so it only loads one set of images. </p>

<p>Thanks for the responses.<br>

I have limited html and css coding skill, but know nothing about javascripts. For the example site's gallery, how the data (i.e., thumbnails, enlargements, captions, etc.) are managed, and how the navigation (i.e. splitting the number of thumbnails, and loading a new set, etc.) are beyond me. Any suggestion on how the javascripts can handle these would be appreciated.<br>

I suspected that gallery has server side sw in action. The gallery also loads rather slowly. The thumbnail block having twelve thumbnails may be the reason. I'm not sure if it is pre-loading all 37 enlargements just to display the first page. Can you clarify how you can speed this up?</p>

<p>

<p>Robert, </p>

<p>You'll first need to determine the layout of your page and any following pages. Will you be using thumbnails of all your images on one page as in your example? Or would you be using thumbnails for categories of images? I would think categories, such as Landscapes, Weddings, Portraits, etc., would be the way to design it. That way you can easily expand to a new category and your visitor is not forever scrolling down a page to find photos that may be of interest. A page with few items to load will also load faster and limiting image size to only what is necessary also helps. On the Home page for example you might have three or four tables with different information. At the top would be a headline at full page width, below the headline a left side column with the thumbnails, a large area to the right of the thumbnails to display the images and optionally a footer that could contain a copyright statement.</p>

<p>If you decide category thumbnails are the way to go, clicking-on a thumbnail would display images in that category to the right of the thumbnail column. But do you want the images to display and rotate through all the category images on their own, or have the visitor click to advance to the next image? This is where javascript comes in. There are many free, open-source javascript image manipulation programs available; search Google using "javascript slideshow" or something similar and find one that works for you. The best explain exactly how to incorporate the script into your page and necessary changes such as where in the script you indicate to the script the location and folder name of your images. I do not know how to write javascript, but I still use javascript.</p>

<p>There are other ways to display images, but I believe what I described is closest to your example. For instance programs such a Capture One and I believe Lightroom include a program to make thumbnail galleries. They do all the coding of the gallery for you, but unless that's all you want someone to see, or you want multiple galleries, you'll still need a Home page to direct visitors to the various galleries.</p>

<p>What you would need to learn is how to set that up; and it's not as difficult as it may seem. As I previously wrote, a program such as Dreamweaver is not necessary, but I've found it and the book I mentioned have helped me save a lot of time and I can see my page as it is being coded. To save some money look for the previous version of Dreamweaver, CS3. And when you're finished validate your page(s) so they display as designed. Dreamweaver includes a validation test.</p>

</p>

<p>Bill is right. You work from the idea (storyboard) design and presentation (after you've gone through the iterations to determine the content, navigation, structure, organization, etc) and work backward. The final idea determines what you use to build it (for the organization, structure, navigation and content), which determines how you build (tools, galleries, blogs, etc.), which determines what you do to build it, and so on to the actual work of building it. You can have Web design applications build it through their wysiwyg tools which writes the code for you (just avoid non-Web applications as they multiple the code or use non-W3C code).</p>

<p>Your best bet is find someone who's done the work, and not necessary a Web programmer(s) as they tend to focus the work inside out instead of outside in. Yeah, it's a process (like you thought it was easy?). But first, do the overall idea framing what you want to show and what you expect the user to see. Remember it's all about the user. You need both good design and good content, otherwise, they won't stay long or come back. But someone can explain and demonstrate the work.</p>

<p>I usually ask the basic questions. What do you want to present? Photos? Blogs? News? Biography? E-commerce? Why should they visit your Website? What will they see that keeps them interested to stay and come back? How will they navigate the Website to find everything? It's a compromise of what you want versus what they see. And I always say, work from their perspective first.</p>

<p>As for Web design and editor applications, Dreamweaver is a lot to start with and it's more a Website management and operation tool around a Web page developer. But it's good if that's your needs and you're willing to learn it. Otherwise there are simplier Web design applications, and all now include some type of (W3C) code checker.</p>

<p>Just some thoughts. Good luck.</p>

<p>Hello,<br>

can anybody offer help? I have a simpel (private) webpage with 5 sub-pages and would like to add a photo gallery/slide show to one of the sub-pages. All I could do so far was uploading the pictures onto the page, but I did not bring a slide show/gallery together.<br>

Would anybody know about a tag/embedded code I can insert into "web editor" codes of the sub-page? Something that allows to add pictures? I am looking for something as simple and robust as possible.<br>

I understand that for using "flickr" it is 1st necessary to post the photo gallery on a "flickr" run webpage and insert the link on my own webpage.<br>

Thanks for help, Karin</p>

<p>Karin,</p>

<p>If you are familiar with coding your own pages you can add a single webpage of images by using one of the methods above; either a free javascript program or a thumbnail gallery using Capture One and I believe Lightroom and also possibly Aperture. If you want a Flash slideshow one I use that is easily customized is SoundSlides. Re-read the above that Scott and I wrote, I'm not sure what other information I can offer.</p>

<p>I use Photo.net slide show with one of my galleries, see <a href="http://www.wsrphoto.com/galleryss01.html">slide show</a>. In addition, I use mouse over/out for other galleries, see <a href="http://www.wsrphoto.com/gallerymt1.html">gallery</a>. To see how any Web page displays a gallery, go to view source. Any others work similarly but coded differently. There are a lot of ways to do a slides show, either as script-driven or flash. Just photo Website galleries takes a little more work as you have to sort out their system, but it should be in the FAQ's or developer notes Web pages.</p>

<p>As for your ideas, what exactly do you want to do, insert one photo, a gallery, a slideshow, or ?? Just to insert one image in a Web page is simple coding (almost all of mine have them), being fancy takes a little more learning and work. The one thing with Web pages, as you see, is that someone has to do it, you, a friend, or someone you pay. Your choice.</p>

<p>I have sufficient html and css skill to layout a gallery page I have in mind. It is very similar to the referenced site's. It will have a block of thumbnails and an enlargement on ONE PAGE, with good navigation for a large number of images (20+) in a gallery, and with captions, etc. If it were a small gallery with all the thumbnails fitting on one page, I can probably code it with html and css without javascripts. But I want a larger gallery, and I do not want flash, or any server side sw. It will be a simple site that does not require such plugins or sw, and one that I can maintain myself.<br>

Lightroom's templates are great, but none would fit these constraints. Besides, it would take quite a bit of work to customize a Lightroom gallery to be compatible with the rest of a site's layout, etc. My google search did produce a large number of gallery templates, but so far I have yet to find one that fits the above constraints. So I pretty much give up on the idea of finding a template.<br>

Since you guys have confirmed that the referenced gallery can be done with javascripts ONLY on top of html and css, I am trying to figure out whether that is something I can take a stab at myself first before hiring someone. Such a person is not easy to come by. The vast majority of the web "designers" want to "design" and "maintain" a site for you. A seasoned programmer probably won't want to waste his time on something "trivial" as this.<br>

So I will repeat my question, how does a javascript handle and manage the data (i.e., thumbnails, enlargements, captions, etc.), and the navigation (i.e. splitting the number of thumbnails, and loading a new set, etc.)? IOW, If I were to read a javascript book, what key words should I look for that would address these? </p>

 

<blockquote>

<p>So I will repeat my question, how does a javascript handle and manage the data (i.e., thumbnails, enlargements, captions, etc.), and the navigation (i.e. splitting the number of thumbnails, and loading a new set, etc.)? IOW, If I were to read a javascript book, what key words should I look for that would address these?</p>

 

</blockquote>

<p>Robert,</p>

<p>How javascript handles data and navigation depends upon how the script was written. Every script is different and includes only what the author intended the script to perform. Different scripts can perform the same actions with differently worded coding, so it's nearly impossible to say what keywords to look for. Many javascripts even reference other javascripts. Do try learning javascript if you're interested and you'll quickly see what I mean. </p>

<p>Try building the site yourself before you decide to pay someone. Even if you're unable to make it work as planned you will likely learn more than you know now and if you do pay someone you'll have the site they create as a template to further experiment with changes on your own.</p>

<p>The first two links below are to sites that have free javascripts. The second two are scripts that may or may not be something like what you are looking for. If they are not, search the first two sites for others. I'm sure you are aware that items such icons can be changed. If you'll be using categories for your images you'll need to place the script of choice and your images in a folder for each category. Six categories means six folders.</p>

<p>As for navigation, if you know how to map the coordinates of a category thumbnail so that clicking on the thumbnail image starts the slideshow of that category, use mapping. If not, use a category title under each thumbnail image to link to the category folder with the images and the javascript.</p>

<p>http://search.internet.com/www.javascriptsource.com</p>

<p>http://javascriptkit.com/script/cutindex21.shtml</p>

<p>http://javascriptkit.com/script/script2/incrementslide.shtml</p>

<p>http://javascriptkit.com/script/script2/indexit.shtml</p>

 

<p>That first link is not correct. You'll have to go to the main page link below and type <em>slide show</em> into the search box.</p>

<p>http://javascript.internet.com/</p>

You might try the Smugmug concept. You can have your own website and interface it with a gallery by SM which

includes flash I believe as well as a selling interface.

 

My opinion-don't reinvent the wheel.

<p>Thanks for the links. They do come up with some interesting results. Also realized there's jquery. Lots of reading ahead of me. After that, I will try to find a good tutor to fill in the gaps.<br>

Like everything else in life, for something "custom", regardless how "simple", one has to work for it :-)</p>