Create an image viewer with Spry
13 Finishing touches
13 Finishing touches
The functionality of the gallery is now complete, but it still needs to be styled. The thumbnail images do not currently have any padding, margins or styling. To style up the thumbnail images first go to Text>CSS Styles>New to create a new pseudo class. Make sure that the Class Selector Type is selected and name the class img.thumbs. This will apply the style to all instances of the img tag inside the tag the class is applied to. The code used in the tutorial example is as follows:
height:135px;
width:135px;
border: 1px dashed #C9A454;
padding: 3px;
margin: 3px;
This creates a one pixel dashed border with a three pixel margin to create space between the images. Adding the padding creates space between the image and the border.
Now select the thumbnail div tag and apply the new class via the Style drop-down list in the Properties window.
Currently, the background colour of the body tag is at the default setting white. Double-click body in the CSS Panel, select Background and add a background colour that compliments the main background image.
14 Data sources
The XML file is the data source from which the images are taken and displayed. This is effectively a database and new content can be added or removed. The tutorial uses eight images which are all displayed in the thumbnail div tag. To add more images simply create a node, ie <photo></photo>, and populate with the new name of the full-size image and the thumbnail. By the same token, a node can be removed by simply deleting from the XML file. Nodes can also be easily modified by simply changing the name of the full-size image and thumbnail image. If replacing or adding a new image make sure to include the new image in both the images and thumbnail folders. Forgetting to include will simply leave a blank space on the page.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Though i have yet not applied but i really liked the concept…….Thanks for sharing with us.
I like this – “The full-size images can be simply resized”. Really very nice things to read on web.
Thx
Hi, I have got as far as page 4, got to this bit:
Now go to Insert>Spry>Spry XML Data Set, name the data set, eg dsGallery, click Browse, locate the the XML file just created, press get Schema, press photo to populate XPath as follows: gallery/photos/photo and press OK. Dreamweaver may place the code further down the page. If so copy and paste and place next to the includes for neater code layout.
and I get this message:
Failed to get schema from the dynamic feed. Please make sure the testing server is configured in the site definition.
Help please?!
Thanks
This is realy cool. Many thanks. LC
very cool thanks…
i want all the coding of html to learn how to create a web site
I am having the same problem as Abbie. Additionally, mine says “Expected an attribute value(2,8)”
I am also having the problem Abbie and Samantha indicated. And it expects and attribute value (6,8). This tutorial could be a little more specific. I see differences in the process between Dreamweaver CS3 and my CS4
What I’ve started doing for a couple of projects recently is to add an image gallery to wordpress and then export gallery to xml which I parse using ajax requests.
That way my clients have a robust image management system but the actual gallery site has none of the overheads of constantly running the IMS.