# javascript - jalbum - paypal values



## garypoet (Apr 30, 2005)

Hi, i'm tearing my hair out!

i'm adapting the Jalbum skin - Cycle - to include paypal add-to-cart buttons that make an update whenever a particular image is chosen.

I've built it from cut and pasting existing scripts as i am totally clueless about javascript, etc.
The problem is that i can't get a value for the Paypal "item_name". It has to be dynamic and be the name of the photo that is clicked on.

Here's the index.htt template - it's a bit of a mess (probably!)


```
<!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=utf-8"/>

<ja:include root page="favicon.inc" />
<title>
	<ja:if exists="albumTitle">$albumTitle
	</ja:if>
	<ja:else>$title
	</ja:else></title>
<meta http-equiv="content-type" content="text/html; charset=$textEncoding">
<meta name="generator" content="$generator with the $skin skin">
<ja:if test="<%= (gKeywords!=void && gKeywords!="") %>"><meta name="keywords" content="$gKeywords"></ja:if>
<ja:if test="<%= (copyright!=void && copyright!="") %>"><meta name="copyright" content="$copyright"></ja:if>

<link href="$resPath/cycle.css" rel="stylesheet" type="text/css" />
<link href="$resPath/jquery.lightbox.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="$resPath/jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="$resPath/jquery.cycle.all.pack.js"></script>
<script type="text/javascript" src="$resPath/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="$resPath/jquery.lightbox.js"></script>
<ja:include page="<%= new File(skinDirectory, "scripts/cycle.inc").getAbsolutePath() %>"></ja:include>




<script type="text/javascript">
function onAfter() { 
    $('#extra2').html("") 
        .append('<h3>' + this.title + '</h3>'); 
}
</script>

<script type="text/javascript">
$(function() {
    $('#pauseButton').click(function() {
    $('#slideshow').cycle('pause');
    });
});
</script>

<script type="text/javascript">
$(function() {
    $('#resumeButton').click(function() {
    $('#slideshow').cycle('resume');
    });
});
</script>

<script type="text/javascript">
function findp() {
document.getElementById("item_name").value=document.getElementById("phot").value;
}
</script>

</head>
<body>



<div id="container">
<div id="header"><h1>$title</h1>

<div id="topnav">
				<ja:if exists="parentIndexPage">
                    <!-- up --> <span><a href="$parentIndexPage">Home</a> | 
                    </ja:if>
                    <ja:else>H o m e</ja:else>
<!-- Create navigation buttons if more than one index page -->
<ja:if exists="totalIndexes">
	<!-- Previous button -->
	<ja:if exists="previousIndexPage"><a href="$previousIndexPage">P r e v i o u s</a> | 
	</ja:if>
	<ja:else>
		</ja:else>
<!-- Next button -->
	<ja:if exists="nextIndexPage"><a href="$nextIndexPage">N e x t</a> | </span>
	</ja:if>
	<ja:else>
		</ja:else>
</ja:if></div>

</div>


	<div id="pay">
	<td><tr>
	<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="https://www.paypal.com/en_GB/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" id="item_name" name="item_name">
<input type="hidden" name="item_number" value="12 x 10&quot; Mounted Print">
<input type="hidden" name="amount" value="15.00">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="bn" value="PP-ShopCartBF">
<a>12 x 10&quot; Mounted Print</a>
</form>

	
	<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="https://www.paypal.com/en_GB/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" id="item_name" name="item_name"> 
<input type="hidden" name="item_number" value="19 x 13&quot; Flat Print">
<input type="hidden" name="amount" value="30.00">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="bn" value="PP-ShopCartBF">
<a>19 x 13&quot; Flat Print</a>
</form>
</td></tr>

<div id="content">
<div id="slideshow" class="pics">
<ja:rowiterator><ja:coliterator><ja:if exists="comment"><a href="$originalPath" rel="lightbox-tour" title="$label:  $comment"></ja:if><ja:else><a href="$originalPath" rel="lightbox-tour" title="$label"></ja:else><img src="$imagePath" width="$imageWidth" height="$imageHeight" alt="$label"/></a></ja:coliterator></ja:rowiterator></div>


</div>
  
	<!-- Iterate through images and produce an index table -->
<ja:if exists="folder"><!-- No frames around icons like folders and movie files -->
<a href="$closeupPath"><img src="$iconPath" width="$maxThumbWidth" height="$maxThumbHeight" border=0 alt="folder image"></a></ja:if><ja:else>


<div id="navigation">
 <ul id="nav"><ja:rowiterator><ja:coliterator>
      <li><a href="#"><img src="$thumbPath"  width="$maxThumbWidth" height="$maxThumbHeight" title="$label"></a>
	
	 <input type="hidden" id="phot" value="$label" onclick="findp()" />
		
		<div class="desc">$label</div></li></ja:coliterator></ja:rowiterator></ul></div>
		 
 </ja:else>

</div>

	</div>
	

<div id="extra2"></div>



</body>
</html>
```
thanks in advance! :up:


----------

