PDA

View Full Version : Code For Gallery Photos


webrock
12-29-2007, 06:02 PM
Hello,

I am hoping someone can help me. I have a template that I am trying to set up where I have small thumbnail photos on the bottom of the page, and when you click on each thumbnail, it brings up a larger photo on the same page. Here is a partial code that I have:

<a href="#"><img src="promo_images/promo1small.jpg" alt="" width="50" height="50" /></a>

I am confused as to what I put under the <a href= part. What type of link do I type in to make it stay on the same page and come up with the larger photo I have created.

Thanks!
Tracy

Cary
12-29-2007, 10:34 PM
Where did you get the gallery template code / instructions?

webrock
12-30-2007, 12:31 AM
Template monster. I am assuming that there has to be some kind of javascript code or something else to direct this link to stay on the same page and where to align it. If I just type in the image name for the reference, it opens up a whole new page, and that is not correct.

You can view the template here:

http://www.templatemonster.com/flash-templates/17754.html

I am using the actual static template in Dreamweaver, and not flash.

Cary
12-30-2007, 04:47 AM
Sorry, but from the link you gave I'm afraid I can't help.

m1a2x3x7
12-30-2007, 03:39 PM
if you want to stay on that same page you leave the # sign in the a href

<a href="#"> that indicates you are not going to a different page but you are reloading the page you are on.

webrock
12-30-2007, 06:27 PM
Hello,

Okay, I tried that and it is not working either. I did it like this:

#images/promo.jpg. I also tried it like this:

#/promo/jpg. It goes nowhere. It doesn't open anything.

I've also done a little more research, and it looks like I might need some more advance javascript code. Here is what I have found so far:

<script src="rollover.js" type="text/javascript">
var slides = new Array (6);
var j = 0
for(var i=1; i<=6; i++)}
slides[i] = new Image();
slides[i}.src="big_promo_images/promo_" + i + ".jpg";}
function Swap (number)(document.slide.src=slides[number].src;}
</script>

Down where my images are, I type it like this:

<a href="="javascript:Swap(1);"><img src="promo_images/promo1small.jpg" alt="" width="50" height="50" /></a><a href="="javascript:Swap(2);"><img src="promo_images/promo2small.jpg" alt="" width="50" height="50" /></a>

This also isn't workiing.

Can someone please tell me what I'm doing wrong, or what else I need?

Thanks!

Tracy

Cary
12-30-2007, 07:06 PM
According to the site you got this from you need to use Flash 8. Did the template come with a non-flash version?

webrock
12-30-2007, 07:16 PM
Yes it did. Here is the current, entire code for the page I am trying to have the thumbnails turn up into larger images:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="rollover.js" type="text/javascript">

</script>



</head>
<body id="page_1" onload="MM_preloadImages('images/m_1_hov.gif','images/m_2_hov.gif','images/m_3_hov.gif','images/m_4_hov.gif')">
<table class="main_table">
<tr>
<td>
<table class="h_table">
<tr>
<td class="column">
<table>
<tr>
<td class="indent">
<img src="images/m_1_hov_revised.gif" alt=" " width="84" height="23" id="Image1" /><br />
<a href="index-5.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/m_2_hov_revised.gif',1)"><img src="images/m_2_revised.gif" alt=" " width="84" height="18" id="Image2" /></a><br />
<a href="index-6.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/m_3_hov_revised.gif',1)"><img src="images/m_3_revised.gif" alt=" " width="84" height="18" id="Image3" /></a><br />
<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/m_4_hov_revised.gif',1)"><img src="images/m_4_revised.gif" alt=" " width="84" height="21" id="Image4" /></a><br />
<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/m_5_hov_revised.gif',1)"><img src="images/m_5_revised.gif" alt=" " width="84" height="21" id="Image5" /></a><br />
<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/m_6_hov_revised.gif',1)"><img src="images/m_6_revised.gif" alt=" " width="84" height="21" id="Image6" /></a><br />
<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/m_7_hov_revised.gif',1)"><img src="images/m_7_revised.gif" alt=" " width="84" height="21" id="Image7" /></a><br />

<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/m_8_hov_revised.gif',1)"><img src="images/m_8_revised.gif" alt=" " width="84" height="21" id="Image8" /></a><br />
<a href="index-7.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/m_9_hov_revised.gif',1)"><img src="images/m_9_revised.gif" alt=" " width="84" height="21" id="Image9" /></a><br />




</td>
</tr>

</table></td>
<td class="column_1">
<table class="w_table h_table">
<tr>
<td class="header">
<div class="indent">
<a href="index.html"><img src="images/logo_1.gif" alt="" width="397" height="92" /></a><br />
</div></td>
</tr>
<tr>
<td class="content">
<div class="indent">
<div class="txt"><span class="txt_1">promo</span> | <a class="link" href="index-2.html">live</a> | <a class="link" href="index-3.html">studio</a> | <a class="link" href="index-4.html">people</a><br />
</div>
<img src="images/promo1black.jpg" alt="" width="576" height="372" /><br />
<div class="block">
<a href="#"><img src="promo_images/promo1small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="promo_images/promo2small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="promo_images/promo3small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="promo_images/promo4small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="promo_images/promo5small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="promo_images/promo6small.jpg" alt="" width="50" height="50" /></a><a href="#"><img src="images/1_pic_7.jpg" alt="" /></a><br />
</div>
</div></td>
</tr>
<tr>
<td class="footer">
<div class="indent">
photographer portfolio &copy; 2008 | <a href="index-8.html">Privacy Policy</a>
</div></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Cary
12-30-2007, 10:46 PM
Can you post all the code contained in rollover.js?

You posted this before:

var slides = new Array (6);
var j = 0
for(var i=1; i<=6; i++)}
slides[i] = new Image();
slides[i}.src="big_promo_images/promo_" + i + ".jpg";}
function Swap (number)(document.slide.src=slides[number].src;}

But this isn't enough to make things work. The rollovers for the menus, for instance, use DW generated javascript which includes a bunch of distinctive "MM"s in the code. The javascript code you posted before also doesn't point to "images/promo1black.jpg" as the image to be replaced, so that should be somewhere.

Can you post or attach the CSS as well, please. Thanks.

webrock
12-31-2007, 03:55 AM
Hi,

This code is what I found that I think should work, along with whatever I am missing:


var slides = new Array (6);
var j = 0
for(var i=1; i<=6; i++)}
slides[i] = new Image();
slides[i}.src="big_promo_images/promo_" + i + ".jpg";}
function Swap (number)(document.slide.src=slides[number].src;}


The other code I listed below is what the page currently has. I believe if I add the above along with something else, I should get what I'm looking for, but I just don't know what that is.

Here is the CSS style that came along with the template:


html {height:100%;}
body{margin:0; padding:0; background: url(images/fill.gif) left top repeat-x #A4A4A4;}
form, td, textarea, ul {margin:0; padding:0;}
img{ vertical-align:top;}
table, td {border-collapse:collapse;}
table, td, img {border:0;}
td, tr {vertical-align:top; text-align:left}
td{
font:9px/15px arial, helvetica, sans-serif;
color:#0E0E0E;
}
.h_table{ height:100%;}
.w_table{ width:100%;}
.clear{ clear:both;}
.right{ text-align:right;}
/*forms*/
form{ display:inline;}
input, textarea, select{font:10px/14px Arial, Geneva, sans-serif; color:#0E0E0E; border:1px solid #A4A4A4;}
.input{ width:176px; height:18px; background:none; margin-right:6px;}
.input_1{ width:167px; height:18px; background:none;}
textarea{width:350px; height:42px; overflow:auto; background:none;}
.inp_h{ height:23px; margin:0 0 5px 0;}
/*end forms*/

/*links*/
a{ text-decoration:none; color:#0E0E0E;}
a:hover{ text-decoration:underline;}
.link{ color:#939393; text-decoration:none;}
.link:hover{ color:#1D1D1D; text-decoration:none;}
.link_1{ font-size:11px; font-weight:bold; text-decoration:underline;}
.link_1:hover{ text-decoration:none;}
/*end links*/
/*txt*/
.txt{color:#939393;}
.txt_1{color:#1D1D1D;}
.txt_2{ font-size:11px; font-weight:bold; text-transform:uppercase;}
.txt_3{ font-size:11px; font-weight:bold;}
/*end txt*/
/*global*/
.block{ height:auto; width:auto; margin:0; padding:0;}
.block_1{ height:auto; width:auto; margin:0; padding:0;}
.block_2{ height:auto; width:auto; margin:0; padding:0;}
.indent{ margin:0; padding:0;}
.in5{ padding-top:5px;}
.in10{ padding-top:10px;}
.in15{ padding-top:15px;}
.in15{ padding-top:20px;}
/*end global*/
ul {list-style:none;}
li a {
line-height:15px;
color:#0E0E0E;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
}
.main_table{ width:780px; background:url(images/bg.gif) left top no-repeat;}
/*header*/
.header{ height:162px;}
.header .indent{ padding:70px 0 0 0;}
/*end header*/
.content { width:100%; height:479px; background:url(images/bgr_right_revised1.gif) right bottom no-repeat;}
/************************ page *************************************/
#page .column{ width:125px;}
#page .column table{ width:125px;}
#page .column .indent{ padding:268px 0 0 0;}
#page .column_1{ width:100%; height:100%;}
#page .column_1 .content .indent{ padding:39px 0 0 19px;}
/************************ end page*************************************/
/************************ page_1 *************************************/
#page_1 .column{ width:125px;}
#page_1 .column table{ width:125px;}
#page_1 .column .indent{ padding:268px 0 0 0;}
#page_1 .column_1{ width:100%; height:100%;}
#page_1 .column_1 .content .indent{ padding:27px 0 0 19px;}
#page_1 .column_1 .content .block{ background: url(images/bg_1.gif) left top repeat-x #9A9A9A; padding:9px 0 9px 9px; margin:0 59px 0 0;}
#page_1 .column_1 .content .block img{margin:0 8px 0 0;}
/************************ end page_1*************************************/
/************************ page_2 *************************************/
#page_2 .column{ width:125px;}
#page_2 .column table{ width:125px;}
#page_2 .column .indent{ padding:268px 0 0 0;}
#page_2 .column_1{ width:100%; height:100%;}
#page_2 .column_1 .content .indent{ padding:27px 0 0 19px;}
#page_2 .column_1 .content .block{ background: url(images/bg_1.gif) left top repeat-x #9A9A9A; padding:9px 0 9px 9px; margin:0 59px 0 0;}
#page_2 .column_1 .content .block img{margin:0 8px 0 0;}
/************************ end page_2*************************************/
/************************ page_3 *************************************/
#page_3 .column{ width:125px;}
#page_3 .column table{ width:125px;}
#page_3 .column .indent{ padding:268px 0 0 0;}
#page_3 .column_1{ width:100%; height:100%;}
#page_3 .column_1 .content .indent{ padding:27px 0 0 19px;}
#page_3 .column_1 .content .block{ background: url(images/bg_1.gif) left top repeat-x #9A9A9A; padding:9px 0 9px 9px; margin:0 59px 0 0;}
#page_3 .column_1 .content .block img{margin:0 8px 0 0;}
/************************ end page_3*************************************/
/************************ page_4 *************************************/
#page_4 .column{ width:125px;}
#page_4 .column table{ width:125px;}
#page_4 .column .indent{ padding:268px 0 0 0;}
#page_4 .column_1{ width:100%; height:100%;}
#page_4 .column_1 .content .indent{ padding:27px 0 0 19px;}
#page_4 .column_1 .content .block{ background: url(images/bg_1.gif) left top repeat-x #9A9A9A; padding:9px 0 9px 9px; margin:0 59px 0 0;}
#page_4 .column_1 .content .block img{margin:0 8px 0 0;}
/************************ end page_4*************************************/
/************************ page_5 *************************************/
#page_5 .column{ width:125px;}
#page_5 .column table{ width:125px;}
#page_5 .column .indent{ padding:268px 0 0 0;}
#page_5 .column_1{ width:100%; height:100%;}
#page_5 .column_1 .content .indent{ padding:93px 110px 0 19px;}
#page_5 .column_1 .content .float{ float:left; margin:0 20px 120px 0;}
#page_5 .column_1 .content .right{margin:15px 0 0 0;}
/************************ end page_5*************************************/
/************************ page_6 *************************************/
#page_6 .column{ width:125px;}
#page_6 .column table{ width:125px;}
#page_6 .column .indent{ padding:268px 0 0 0;}
#page_6 .column_1{ width:100%; height:100%;}
#page_6 .column_1 .content .block{ width:51%;}
#page_6 .column_1 .content .block .indent{ padding:93px 60px 0 20px;}
#page_6 .column_1 .content .block_1{ width:49%;}
#page_6 .column_1 .content .block_1 .indent{ padding:93px 60px 0 0;}
/************************ end page_6*************************************/
/************************ page_7 *************************************/
#page_7 .column{ width:125px;}
#page_7 .column table{ width:125px;}
#page_7 .column .indent{ padding:268px 0 0 0;}
#page_7 .column_1{ width:100%; height:100%;}
#page_7 .column_1 .content .block{ padding:0 35px 0 0;}
#page_7 .column_1 .content .indent{ padding:93px 0 0 19px;}
#page_7 .column_1 .content table td .indent{ padding:0 75px 0 0;}
#page_7 .column_1 .content .float{ margin:0 20px 0 0;}
#page_7 .column_1 .content .lin{padding:0 0 0 270px;}
/************************ end page_7*************************************/
/************************ page_8 *************************************/
#page_8 .column{ width:125px;}
#page_8 .column table{ width:125px;}
#page_8 .column .indent{ padding:268px 0 0 0;}
#page_8 .column_1{ width:100%; height:100%;}
#page_8 .column_1 .content .block{ padding:0 35px 0 0;}
#page_8 .column_1 .content .indent{ padding:93px 75px 0 19px;}
#page_8 .column_1 .content .float{ margin:0 20px 0 0;}
/************************ end page_8*************************************/
/*footer*/
.footer{ height:59px; font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#1A1A1A; text-transform:uppercase;}
.footer a{font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#1A1A1A; text-transform:uppercase;}
.footer .indent{ padding:23px 0 0 17px;}
/*end footer*/

They also included something called rollover:

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}



I really appreciate the help! Anything you can do to get this to work for me is certianly appreciate!

Thanks,
Tracy

Cary
01-01-2008, 07:37 PM
I'm afraid all I could find was this (http://info.template-help.com/print/after_sale_support/working_with_html/Advanced/article3.html).

It sort of explains how to use the javascript your page seems to include, but I couldn't get it it to work. Hopefully, someone here who really knows javascript will take a look and be able to help you. You can also ask for help with this under the javascript forum here to make sure it's seen by those who can help.

Note: There are some typos such as the wrong kinds of brackets and such in your javascript which you can see when you compare it to the code at the link I gave.

webrock
01-01-2008, 08:16 PM
Thanks for trying!

Do you know if there is another javascript code I could use that would get me the same results I am looking for?

Cary
01-02-2008, 02:52 AM
Yes, there are other javascript methods for doing this, but I'm not very familiar with any of them. Again, you would probably have better luck asking about this in the javascript forum.