SoulEyes Photography
*SoulEyes Photography>>>Photo Gallery

Dreamweaver image gallery?


I am making a website with Dreamweaver and want to create a simple image gallery that can be viewed from thumbnails. Look at this link http://www.dommowbray.com/view-img3.asp?... as this is exactly what I want to do. I want to know how to go about creating this and not via the photo album tool in the commands section. I need to be able to place this gallery within a page layout similar to the one in the link anyone help as its doing my nut in?

Well copy that page source, open it in dreamweaver and adapt it to your own needs. The stuff that does the 'magic' is the javascript - it's a bit messy in that one though.

Heres one I made earlier:
It's impossible to actually give you an example that's going to be exactly suited to you but I HOPE that what this is doing here will be clear enough for you to adapt it to your own needs.

put this above your </head> tag


<script language="JavaScript" type="text/JavaScript">
<!--
var art_content = new Array ();
art_content[0] = new Image(); art_content[0].src = "1.jpg";
art_content[1] = new Image(); art_content[1].src = "2.jpg";
art_content[2] = new Image(); art_content[2].src = "3.jpg";
art_content[3] = new Image(); art_content[3].src = "4.jpg";
art_content[4] = new Image(); art_content[4].src = "5.jpg";
art_content[5] = new Image(); art_content[5].src = "6.jpg";
art_content[6] = new Image(); art_content[6].src = "7.jpg";
art_content[7] = new Image(); art_content[7].src = "8.jpg";


var place_holder = 0;


function iSwap(i) {
document.images['art'].src = art_content[i].src;

}
//-->
</script>

this is for the image you want to change:

<img src="1.jpg" name="art" id="art" />

put this in your body:


<p><a href="javascript:;" onclick="iSwap(1)">1</a>
<a href="javascript:;" onclick="iSwap(2)">2</a>
<a href="javascript:;" onclick="iSwap(3)">3</a>
<a href="javascript:;" onclick="iSwap(4)">4</a>
<a href="javascript:;" onclick="iSwap(5)">5</a>
<a href="javascript:;" onclick="iSwap(6)">6</a>
<a href="javascript:;" onclick="iSwap(7)">7</a>
<a href="javascript:;" onclick="iSwap(0)">8</a>
</p>


You can swap text links for images etc ope it all makes sense
I would guess that the small photos on the left of the page have been set up in a table.

When you click on one of those small photos, a larger version appears on the right. Therefore, you need two separate image files (probably both jpg), one for the small images and the other for the large image. When a small image is selected the lareg image should appear.

Hope that might help!
The page you are giving as an example uses Javascript to perform the functionality you're looking for. You can view the page's source code by clicking View -> Source (or View -> Page Source in Firefox).

The functiona that do what you ask is within the
<SCRIPT language="javascript" type="text/javascript">....</S... taga.

Note however that in order to use this script you'll need to have some fundamental knowledge on Javascript. There are many good online tutorials that you can have a look. Just Google "Javascript tutorials" and there will be a wide variety to choose from.
Tags
Photography School Photography Magazine Photography Jobs Photography Equipment Photography Courses Photo Gallery Photo Essays Art Gallery Wedding Photography Stock Photography
Related information
  • How can i get my artwork into a museum gallery, such as the MOMA in new york???
  • Does anyone have a photo of the Club Deroes MC, Australia, Backpatch Colours?
  • Cheapest, most efficient way to choose & buy frames for digital photos you plan to sell at gallery & on-line?
  • Can you write a BRIEF,horror story regarding this photo?
  • How do i transfer all my photos on my computer to kodak gallery?
  • Upload photo and modify a xml?
  • I want to shift my yahoo photos to flickr instead of kodak gallery which i have already intiated can i do that
  • How do I add a photo to my prfile since photos is going away?
    • 　

    Photography Categories--Copyright/IP Policy--Contact Webmaster