|
|
| Author |
Message |
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
 Posted: Thu Nov 11, 2004 2:29 pm Post subject: |
 |
|
Oh, but I need to know which template you're using.
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
 |
witam
Joined: 27 Oct 2004
Posts: 812
Location: Belgium
|
| Posted: Thu Nov 11, 2004 2:30 pm Post subject: |
|
|
|
|
|
|
|
|
LiveRocker
Joined: 11 Nov 2004
Posts: 14
Location: Canada
|
| Posted: Thu Nov 11, 2004 2:31 pm Post subject: |
|
|
Excellent!
|
|
|
|
|
|
witam
Joined: 27 Oct 2004
Posts: 812
Location: Belgium
|
| Posted: Thu Nov 11, 2004 2:41 pm Post subject: I'll make it easy |
|
|
|
|
|
|
|
|
LiveRocker
Joined: 11 Nov 2004
Posts: 14
Location: Canada
|
| Posted: Thu Nov 11, 2004 2:47 pm Post subject: |
|
|
got it.
|
|
|
|
|
|
LiveRocker
Joined: 11 Nov 2004
Posts: 14
Location: Canada
|
| Posted: Thu Nov 11, 2004 2:55 pm Post subject: |
|
|
woops, I missed a couple of your posts... sorry!
I will be using the Horizontal Slideshow template from PS CS.
Yes the thumbnails will have to be configured so they fit in the vertical thumbnail box (slider).
|
|
|
|
|
|
LiveRocker
Joined: 11 Nov 2004
Posts: 14
Location: Canada
|
| Posted: Thu Nov 11, 2004 2:56 pm Post subject: |
|
|
Whenever you want to get started.... it might be a little easier if we use say windows messenger or something.
What do you think?
|
|
|
|
|
|
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
| Posted: Thu Nov 11, 2004 4:35 pm Post subject: |
|
|
Ok here goes the tutorial. It is 1:00 PM now, we'll see how long this takes me.
OK.
Step 1: Do the slide show setup and customize it however you wish.
Step 2: Open the file "ThumbnailFrame.htm" in any text editor or an HTML editor if you have one. If not, notepad will work just fine. Scroll all the way down to the bottom and find the following chunk of code (You will notice some differences because you are using different images than witam did):
| Quote: | <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" bgcolor="#CCCCCC" onload="isBottomFrameLoaded = true; startAutoAdvance(); preloadMyImages();">
<div id="thumbnail" align="center">
<table height="82" border="0" cellpadding="4" cellspacing="0">
-------------------------------------------------------
<tr align="center">
<!-- Thumbnails with hyperlinks -->
<td align="center">
<a onmouseover="window.status='disco1.jpg'; return true;" onmouseout="window.status=''; return true;" href="javascript:jumpToImage(replaceCharacter('disco1.jpg', '%20', ''));"><img src="thumbnails/disco1.jpg" width="100" height="75" border=0 alt="disco1"></a>
</td>
<script language="javascript">
var newIndex = myImagesIndexed.length;
myImages[replaceCharacter('disco1.jpg', '%20', '')] = newIndex;
myImagesIndexed[newIndex] = new Array("disco1.jpg", "", "", "", "", "disco1.jpg");
</script><!-- Thumbnails with hyperlinks -->
</tr>
-------------------------------------------------------
<tr>
<td align="center">
<a onmouseover="window.status='disco2.jpg'; return true;" onmouseout="window.status=''; return true;" href="javascript:jumpToImage(replaceCharacter('disco2.jpg', '%20', ''));"><img src="thumbnails/disco2.jpg" width="100" height="75" border=0 alt="disco2"></a>
</td>
<script language="javascript">
var newIndex = myImagesIndexed.length;
myImages[replaceCharacter('disco2.jpg', '%20', '')] = newIndex;
myImagesIndexed[newIndex] = new Array("disco2.jpg", "", "", "", "", "disco2.jpg");
</script> </tr>
-------------------------------------------------------
</table>
</div>
</BODY>
</HTML>THIS SHOULD BE THE LAST LINE OF CODE |
Now I want you to think of this in blocks. I made each block italic and separated them with lines. Each block needs to have a <tr> in the beginning and a </tr> in the end. The bold items are the parts I had to add to make it list as a column instead of a row. You will need to add these parts for every block you see. Let me know if you're confused on this part...
Step 3: Close the thumnail document and open "Index.htm" in your text editor. You should see this:
| Quote: |
<html>
<head>
<title>Adobe Web Photo Gallery</title>
<meta name="generator" content="Adobe Photoshop(R) CS Web Photo Gallery">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="images/galleryStyle.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var isMainPageLoaded = false;
function init() {
//Create a timer to check to see if the bottom frame is loaded
//before calling into it.
if (top.BottomFrame.isBottomFrameLoaded) {
top.BottomFrame.setArrows();
} else {
setTimeout("init()", 10);
}
}
//-->
</script>
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" bgcolor="#FFFFFF" onload="isMainPageLoaded = true; init();">
<div align="center" class="mainCenter">
<table width="90%" height="97%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table>
<tr>
<td>
<a onmouseover="window.status='Previous Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.previousImage();"><img name="previous1" src="images/previous_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Previous Image"></a>
</td>
<td>
<a onmouseover="top.BottomFrame.togglePlayPauseImg('over'); window.status='Start or Stop Slide Show'; return true;" onmouseout="top.BottomFrame.togglePlayPauseImg('out'); window.status=''; return true;" href="javascript:top.BottomFrame.togglePlayPauseState();"><img name="pausePlay1" src="images/spacer.gif" width="19" height="19" vspace="2" hspace="1" border="0" alt="Play/Pause"></a>
</td>
<td>
<a onmouseover="window.status='Next Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.nextImage();"><img name="next1" src="images/next_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Next Image"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%">
<iframe id="TopFrame" name="TopFrame" frameborder="0" scrolling="auto" src="pages/disco1.htm">
Your browser does not support iframes.
</iframe>
</td>
[PLACE CHUNK OF CODE HERE]
</tr>
<tr>
<td align="center">
<table>
<tr>
<td>
<a onmouseover="window.status='Previous Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.previousImage();"><img name="previous2" src="images/previous_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Previous Image"></a>
</td>
<td>
<a onmouseover="top.BottomFrame.togglePlayPauseImg('over'); window.status='Start or Stop Slide Show'; return true;" onmouseout="top.BottomFrame.togglePlayPauseImg('out'); window.status=''; return true;" href="javascript:top.BottomFrame.togglePlayPauseState();"><img name="pausePlay2" src="images/spacer.gif" width="19" height="19" vspace="2" hspace="1" border="0" alt="Play/Pause"></a>
</td>
<td>
<a onmouseover="window.status='Next Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.nextImage();"><img name="next2" src="images/next_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Next Image"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
-----------------------------------------------------------
<td align="center">
<table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/roundotNW.gif" alt="" height="5" width="5" border="0"></td>
<td background="images/roundotN.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td><img src="images/roundotNE.gif" alt="" height="5" width="5" border="0"></td>
</tr>
<tr>
<td background="images/roundotW.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td width="100%" height="100">
<iframe id="BottomFrame" name="BottomFrame" frameborder="0" src="ThumbnailFrame.htm">
Your browser does not support iframes.
</iframe>
</td>
<td background="images/roundotE.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
</tr>
<tr>
<td><img src="images/roundotSW.gif" alt="" height="5" width="5" border="0"></td>
<td background="images/roundotS.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td><img src="images/roundotSE.gif" alt="" height="5" width="5" border="0"></td>
</tr>
</table>
</td>
-----------------------------------------------------------
</tr>
</table>
</div>
</body>
</html>
|
At the bottom you will see I have outlined a chunk of code. Move that code to where to bold text says.
Step 4: Now you need to delete a couple of things and add a couple of things. Delete all the bold-underlined stuff and add all the bold stuff.
| Quote: |
<html>
<head>
<title>Adobe Web Photo Gallery</title>
<meta name="generator" content="Adobe Photoshop(R) CS Web Photo Gallery">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="images/galleryStyle.css" rel="stylesheet" type="text/css">
<script language="javascript">
<!--
var isMainPageLoaded = false;
function init() {
//Create a timer to check to see if the bottom frame is loaded
//before calling into it.
if (top.BottomFrame.isBottomFrameLoaded) {
top.BottomFrame.setArrows();
} else {
setTimeout("init()", 10);
}
}
//-->
</script>
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" bgcolor="#FFFFFF" onload="isMainPageLoaded = true; init();">
<div align="center" class="mainCenter">
<table width="90%" height="97%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="2">
<table>
<tr>
<td>
<a onmouseover="window.status='Previous Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.previousImage();"><img name="previous1" src="images/previous_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Previous Image"></a>
</td>
<td>
<a onmouseover="top.BottomFrame.togglePlayPauseImg('over'); window.status='Start or Stop Slide Show'; return true;" onmouseout="top.BottomFrame.togglePlayPauseImg('out'); window.status=''; return true;" href="javascript:top.BottomFrame.togglePlayPauseState();"><img name="pausePlay1" src="images/spacer.gif" width="19" height="19" vspace="2" hspace="1" border="0" alt="Play/Pause"></a>
</td>
<td>
<a onmouseover="window.status='Next Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.nextImage();"><img name="next1" src="images/next_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Next Image"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%">
<iframe id="TopFrame" name="TopFrame" frameborder="0" scrolling="auto" src="pages/disco1.htm">
Your browser does not support iframes.
</iframe>
</td>
<td align="center" width="150">
<table width="150" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/roundotNW.gif" alt="" height="5" width="5" border="0"></td>
<td background="images/roundotN.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td><img src="images/roundotNE.gif" alt="" height="5" width="5" border="0"></td>
</tr>
<tr>
<td background="images/roundotW.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td width="100%" height="250">
<iframe id="BottomFrame" name="BottomFrame" frameborder="0" src="ThumbnailFrame.htm">
Your browser does not support iframes.
</iframe>
</td>
<td background="images/roundotE.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
</tr>
<tr>
<td><img src="images/roundotSW.gif" alt="" height="5" width="5" border="0"></td>
<td background="images/roundotS.gif"><img src="images/spacer.gif" alt="" height="5" width="5" border="0"></td>
<td><img src="images/roundotSE.gif" alt="" height="5" width="5" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<table>
<tr>
<td>
<a onmouseover="window.status='Previous Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.previousImage();"><img name="previous2" src="images/previous_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Previous Image"></a>
</td>
<td>
<a onmouseover="top.BottomFrame.togglePlayPauseImg('over'); window.status='Start or Stop Slide Show'; return true;" onmouseout="top.BottomFrame.togglePlayPauseImg('out'); window.status=''; return true;" href="javascript:top.BottomFrame.togglePlayPauseState();"><img name="pausePlay2" src="images/spacer.gif" width="19" height="19" vspace="2" hspace="1" border="0" alt="Play/Pause"></a>
</td>
<td>
<a onmouseover="window.status='Next Image'; return true;" onmouseout="window.status=''; return true;" href="javascript:top.BottomFrame.nextImage();"><img name="next2" src="images/next_disabled.gif" width="36" height="19" vspace="2" hspace="1" border="0" alt="Next Image"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>
|
And that should be it! Let me know if there are any mistakes in there or you run into any problems. I'm almost positive there's something wrong in there. Very confusing to edit code in this textbox while adding BBcode... 
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
|
witam
Joined: 27 Oct 2004
Posts: 812
Location: Belgium
|
| Posted: Thu Nov 11, 2004 4:52 pm Post subject: |
|
|
|
|
|
|
|
|
BryanDowning
Joined: 05 Jul 2004
Posts: 1554
Location: California, USA
|
| Posted: Thu Nov 11, 2004 5:05 pm Post subject: |
|
|
My brain is mush now.
_________________
Best Regards,
Bryan Downing
bryandowning.com |
|
|
|
|
|
|
)
