Image Thumbnail Viewer II - PayPal links possible?

[kwarr]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: I have an existing website which uses Image Thumbnail Viewer to great effect to display jewellery http://melissajamesjewellery.com/limited.html. I want to add PayPal 'Add to cart' function, effectively turning the site into shop. The idea is that the customer clicks on the enlarged image to add it to the cart.

The PayPal code is a form with 5 lines of code (as below), so it won't fit in the rev=link:url option.

Is there some cunning way in which I can achieve this?


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MII..... ==-----END PKCS7-----">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

[ddadmin]

One solution might be to add each Paypal "cart form" code to the page as a hidden element, then for the enlarged image's link, specify a JavaScript URL that submits this form in place of an ordinary HTML.

Firstly, you'd add the Paypal code to your page as a hidden element, for example:


<form id="item1" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="display:hidden">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MII..... ==-----END PKCS7-----">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

The changes here to the Paypal code are:

1) Add an ID attribute to it to uniquely identify this form.
2) Add a display:hidden CSS declaration to hide the form on the page.
3) Remove the "target" attribute to prevent it from interfering with JavaScript submission (remove the grayed out part above).

With the above changes to your Paypal code, next step is to replace the URL of the enlarged image the form should be associated with with a JavaScript URL that submits this form when clicked on, for example:

<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:javascript:jQuery('#item1').submit()">The Moon #1</a>

The key here is to use the URL syntax "javascript:jQuery", then replace "item1" with the ID of each of your Paypal form's ID attribute value.

Finally in order for the JavaScript URL syntax to be recognized by the script, inside the .js file, find the below line:


var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"

and change it to:


var namevalpair=rawopts[i].split(/:(?!\/\/|jQuery)/) //avoid spitting ":" inside "http://blabla"]

That should do it.

[kwarr]

Very many thanks.
I'm going away for a few days will then try your solution when back
Kip

[kwarr]

I'm back and it works. Thank you very much, ddadmin.

A note for anyone else wanting to use this; If you don't want to show the PayPal button you need to shrink it, so alter the code as follows:
<input type="image" width="1" height="1" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
The change is adding width="1" height="1"