Custom Shopp Gallery with FancyBox

Following on from a previous post Custom Shopp Gallery, here is how to do make a custom Shopp gallery with FancyBox.

1. You will neded to download FancyBox and upload it to your site.

2. Edit your-theme/header.php and add this Javascript.
Add this before your </head>

i. Take note of $wp_query->post->ID == 4, change 4 to the ID of your Shopp page. This makes sure we only include the FancyBox code on the Shopp pages.

ii. Take note of the Javascript and CSS locations.

&lt;?php if ($wp_query-&gt;post-&gt;ID == 4) { ?&gt;
    &lt;script type="text/javascript" src="&lt;?php bloginfo('template_url'); ?&gt;/fancybox/jquery.fancybox-1.3.4.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="&lt;?php bloginfo('template_url'); ?&gt;/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /&gt;
    &lt;script type="text/javascript" &gt;
        $(document).ready(function() {
            $("a.prettyphoto").fancybox({
                    'transitionIn'    :    'elastic',
                    'transitionOut'    :    'elastic',
                    'speedIn'        :    600,
                    'speedOut'        :    200,
                    'titleShow'        :    false,
                    'overlayShow'    :    false
                });
        });
    &lt;/script&gt;
&lt;?php } ?&gt;

3. Edit your-theme/shopp/product.php

&lt;?php
if (sizeof($Shopp-&gt;Product-&gt;images) &gt; 1) {
    $Shopp-&gt;Product-&gt;images = array_reverse($Shopp-&gt;Product-&gt;images);
    echo '&lt;div style="width: 256px;align;center;padding-top: 10px"&gt;';
 
    if(shopp('product','has-images')) {
        echo '&lt;em&gt;Other views...&lt;/em&gt;&lt;br /&gt;';
        while(shopp('product','images')) {
            echo '&lt;a  rel="grouped_elements"  title="'.shopp('product','name','return=true').'" href="'.shopp('product','image','sharpen=100&amp;size=1024&amp;property=url&amp;return=true&amp;fit=matte').'"&gt;'.shopp('product','image','fit=crop&amp;return=true&amp;thumbsize=120&amp;class=borderimage&amp;alt='.shopp('product','name','return=true')).'&lt;/a&gt;';
            echo '&amp;nbsp;';
        }
    }
 
    echo '&lt;/div&gt;';
}
?&gt;

Done!

Author: Kieran Barnes

Kieran is a PHP developer with 15 years commercial experience. Specialist in WordPress, CakePHP, CubeCart and all things PHP.

2 thoughts on “Custom Shopp Gallery with FancyBox”

  1. So, please can you adaptive this code for old shopp 1.0.18 version? Because i have problems with Jquery and images but i can’t update to last version because all custom payment gateway need be rewrite. They are rewrite core and its killed me..

  2. Im not sure I understand the very important part about changing the ID, what exactly is the shopp post ID? Im using Shopp 1.2.4 (Installed December 2012) and it seems that every product has its own ID much like regular wordpress posts. How would I find the ID that is specific to the Shopp product template?

Leave a Reply

Your email address will not be published. Required fields are marked *