website gallery, javascript, XML help! [Archive]

Emazz

04-15-2006, 10:48 PM

First off, I' not sure if this is the right forum to ask this, since what I need help with has a main focus in images, but we'll see. I hope mods will move it if it's wrong.

OK so now to my problem, wich I dont relaly know how to start to describe, other than that I'm in big need of help! :o

I'm trying to build up a homepage, and I have made a layout on my own in Photoshop and sliced and coded that.
Now the main content of the website is gonna be images, preferably in javascript galleries, very much preferably this (http://www.airtightinteractive.com/simpleviewer/manual_instruct.html) one.
And I have a layout that has a background, that i want to include so that the images in the Jscript gallery show up over, and on the left side of the layout there is a big "box" with buttons on the index page, but when you click on any of the buttons to get to the gallery, all the buttons dissapear and the box will be the background for the image thumbnails instead.

My main issue here is lack of how to start, I have learned how to link the image gallery to the buttons, via html tags, but then the javascript comes up and the background is one color, and not the layout I want. And I dont know how to get that in there. And how to make it a working page :(
The javascriptgallery(linked above) is consistent of two files, whereas you edit settings in one XML file, and then you can preview it in the index.html file.
I also have a readymade(by photoshop when slicing) index.html file that combines my whole layout.

I have tried to work this in Dreamweaver but lack of knowledge in that program has left me stumped also.

I have knowledge of "basic" codes in html and I have a bit of knowledge of the same in Css but I dont know a whole lot more.

basicly, maybe someone could help me to say is this possible to do(it has to ne somehow!) and help me tell how to get started with it.

I can show you codes of anything, just tell me what.

Grateful for any help and tips, even links to pages that explain whatever tecnique i should work in (css for example).:)

Emazz

04-18-2006, 07:23 PM

Well, I dont have the page up online right now, but the slicing part i dont think is the issue... since it was coded automaticly with html at the slicing procedure :thumbsup:

But here comes an explanation as to how I picture this website to look:
http://img507.imageshack.us/img507/3022/ex3cr.jpg

Now I realised it will propably be a problem getting the background on all the galleries, right? I mean since I have a different image as the main index page i would somehow need the "second" background page to work when I click each different gallery....

I got a tip that I was supposed to put in the <object> part into the html part or something similar, and tried that in many different variations, and got only one half working and that's when I put the <object> part instead of index.html in this tag:
(What happened was basicly I saw the gallery inside the sliced image(bar) that I have on the left, but the gallery image was also inside of that area. And almost as small as the thumb itself. Duh.)
<a href="index.html"><img src="images/mainlayout_13.jpg" title="View my art gallery" width="175" height="39" alt="Art Gallery" border="0"></a>

And now over to some more codes, more like all the different code sheets that I got and that is doinh not much more than confusing me all the time :rolleyes:

*I have one index page named "mainlayout.html" that is the sliced and coded one on the first image. It has a "done" coding in html with tables as far as I understand.
A snippet with just one of the slices included
<html>
<head>
<title>Layout-nekomania</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/Layout-nekomania_01.jpg" width="800" height="56" alt=""></td>
</tr>
</table>

</body>
</html>
*I have the "second index page" with basicly just one slice and a background. The slice is the HOME button that's the only button that's gonna be left in the bar. Oh and here I have included the object tag, but it's obviously in the wrong place(or SOMETHING is wrong with it) since it aint working, but I'm just showing you what it looks like now.
<html>
<head>
<title>Nekomania</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100%" height="100%"

align="middle">
<param name="movie" value="viewer.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="background="images/Layout-nekomania.jpg" />
<embed src="viewer.swf" width="100%" height="100%" align="middle" quality="best" scale="noscale"

background="images/Layout-nekomania.jpg" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<img src="images/Layout-nekomania.jpg" title="Go back to Index" width="800" height="600" border="0" alt="Home">

</body>
</html>

*I have the imagegallery(javascript) simpleviewer, that gave me an index.html page, and a XML document that is named "imagedata.xml".

Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SimpleViewer</title>
<style type="text/css">

</style>

<script language="javascript" type="text/javascript" src="flash_detect.js">

</script>

<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100%" height="100%" align="middle">
<param name="movie" value="viewer.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="BGCOLOR" value="#181818" />
<embed src="viewer.swf" width="100%" height="100%" align="middle" quality="best" scale="noscale" background="images/Layout-nekomania.jpg" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
XML doc
<?xml version="1.0" encoding="UTF-8"?>
<SIMPLEVIEWER_DATA maxImageDimension="600" textColor="0xFFFFFF" frameColor="0xFFFFFF" background="Layout-nekomania.jpg"

frameWidth="1" stagePadding="5" thumbnailColumns="2" thumbnailRows="4" navPosition="left" navDirection="LTR" title="Example Title"

imagePath="" thumbPath="">
<IMAGE>
<NAME>xperiment-nekomania.jpg</NAME>
<CAPTION>Xperiment</CAPTION>
</IMAGE>
</SIMPLEVIEWER_DATA>
*I have a folder for thumbnails and a folder for images. In the images folder is this far only gallery1images, since I want it to work before I change it and make different galleries. Then I will have to change the filestructure a little but I think I could manage that. Basicly now i just need to get one gallery to WORK with the layout already.

Now you might see that there are some stuff wrong in the coding concerning the background, since I tried to change everything and putting in the <object> part in different places of the second layout page's html, but never got the result I wanted. So hopefully now if you see all the codes, you could tell me to put it in and what to change so that it will work..

If anyone managed to read until here, thank you so much!