-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsupply-fancybox-setup.html
252 lines (177 loc) · 13.9 KB
/
supply-fancybox-setup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<style>
.container{
max-width: 860px;
margin: 40px auto;
font-family: sans-serif;
line-height: 1.6em;
}
article{
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
img{
max-width: 100%;
}
code {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
pre code{
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
h2{
margin-top: 2em;
}
</style>
<div class="container">
<article class="col-xs-12">
<h1>How to add the FancyBox lightbox to the Supply theme</h1>
<p>I'm happy to help everyone with implementing a lightbox effect for their product photos on the Supply theme, but there are a couple items I feel need to be cleared up before we start.</p>
<p>The first being that the Supply theme actually <strong>does not</strong> use Fancybox. Fancybox is the name of a specific plugin from an author. A "lightbox" effect is used to showcase product photos and there are a number of plugins that accomplish this like Colorbox, Slimbox or Fancybox. If you look in the Assets folder once you've downloaded the Supply theme, you'll see that there aren't any of the same files in there that the fancyApps website says you'll need. <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p>
<p>Second, the customization below will have the lightbox effect be the default effect for a product feature images. If you choose to turn on "Enable Image Zoom" from your Customize Theme page, then that will prevent the lightbox effect from happening on click. So this is a decision between being able to zoom in tight on photos on mouseover, or have them enlarge on click.</p>
<p>Third, getting Fancybox working with your Supply theme, with the ability to navigate through a gallery, and not sacrifice the option to have the zoom feature
for Supply's product images is going to be a pretty heavy customization. I have the steps below, and I <strong>strongly recommend</strong> you make these modifications on <a href="http://docs.shopify.com/manual/your-website/themes/export-duplicate-delete-themes#duplicate-theme">a duplicate of your theme</a> and not on your actual published theme. You may even want to ask someone with a good amount of experience manipulating HTML and Javascript to help you out. Once you have it working on your duplicate, it's a simple step to publish it as your public-facing theme.</p>
<p><strong>Final item</strong>: If you choose to make this customization, it will be your responsibility to implement and maintain it. You'll be making changes to some pretty important files across multiple locations, so a Shopify employee won't be able to help you fix any issues that come up from implementing this.</p>
<p>Cool. Here we go!</p>
<p>We'll be using version 1.3.4 found at <a href="http://fancybox.net/">http://fancybox.net/</a>.</p>
<h2>Step 1: Getting your files</h2>
<p>Head to http://fancybox.net/howto and download the zip file by clicking "Version 1.3.4" or <a href="http://fancybox.googlecode.com/files/jquery.fancybox-1.3.4.zip">click this link</a>, which ever you want.</p>
<p>In that zip file are some files we don't need, like an out-dated version of jQuery. So unzip the jquery.fancybox-1.3.4.zip file, find the fancybox directory inside it. Those are the files we want.</p>
<p><img src="http://snapify.shopify.com/02-36-fbotv-zhu1u.png" alt="http://snapify.shopify.com/02-36-fbotv-zhu1u.png"></p>
<p>Uploading this many files to your Asset directory can be a pain, so you may want to download your theme to your computer and upload your files offline. You can find more information about that in our <a href="http://docs.shopify.com/support/your-website/themes/i-want-to-bulk-upload-many-files-to-my-theme-assets-do-you-have-a-bulk-upload-feature">online documentation about bulk uploads</a>.</p>
<h2>Step 2: Setup your script and style files</h2>
<p>In your theme.liquid file, add the following code before the closing <code></head></code> tag so your browser has access to the files. You won't be able to just copy-paste from <a href="http://fancybox.net/howto">fancybox.net's How To</a> because your files are in a different location than the example.</p>
<p>Here is the code in liquid form that you'll want to past before the closing <code></head></code>.</p>
<pre><code> <!-- Fancybox plugin files ======== -->
{{ 'jquery.fancybox-1.3.4.js' | asset_url | script_tag }}
{{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}
<!-- Option: Fancybox easing transitions -->
{{ 'jquery.easing-1.3.pack.js' | asset_url | script_tag }}
</code></pre>
<p>Then at the bottom of your theme.liquid template, paste the code that will make Fancybox "fire", or activate, when a customer clicks one of product featired image. Right before your closing <code></body></code> put the following script.</p>
<pre><code> <script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#fancy_image").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 200,
'overlayShow' : true
});
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.fancy_group").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 200,
'overlayShow' : true
});
});
</script>
</code></pre>
<p>What this says is that any link elements that have the id of "fancy_image" or the class of "fancy_group" will be using the Fancybox plugin. I have the same settings being applied to both "#fancy_image" and ".fancy_group".</p>
<p>I'll talk briefly about these settings later on, but if you're curious what <code>'overlayShow' : true</code> actually means, check out the Options available to you at <a href="http://fancybox.net/api">http://fancybox.net/api</a>.</p>
<h2>Step 3: Bug fix for the main fancybox file</h2>
<p>Because this version of Fancybox was made well before our current day version of jQuery, there is a quick fix we need to make. In your jquery.fancybox-1.3.4.js file, replace line 29 with the following:</p>
<p><code>isIE6 = navigator.userAgent.match(/msie/i) && navigator.userAgent.match(/6/) && !window.XMLHttpRequest,</code></p>
<h2>Step 4: Prep your product page images</h2>
<h3>Option 1: Just one lightboxed image</h3>
<p>Head to your product.liquid template and look for the lines of code where the featured product photo is referrenced. Assuming you haven't made any code changes yet, it will be line 12. Replace the line:
<code>
<img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
</code></p>
<p>With these lines:</p>
<pre><code><a id="fancy_image" href="{{ featured_image | img_url: 'master'}}">
<img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
</a>
</code></pre>
<h3>Option 2: Gallery images on product page</h3>
<p>If we want to have visitors be able to navigate through a gallery of product images, we'll need to add the classes we defined in Step 2.</p>
<p>On our featured image's <code><a></code> element, we are going add <code>class="fancy_group"</code> and <code>rel="group1"</code>. We are still going to add <code>id="fancy_image"</code> because it will be needed for a modification to our shop.js file later. Those lines should now look like this:</p>
<pre><code><a id="fancy_image" class="fancy_group" rel="group1" href="{{ featured_image | img_url: 'master'}}">
<img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
</a>
</code></pre>
<p>And then down in our for-loop that displays different product thumbnails, we are going to add a "dummy link" before each thumbnail image. Our dummy link will be:</p>
<p><code><a href="{{ image.src | img_url: 'master' }}" class="fancy_group" rel="group1"></a></code></p>
<p>So now your for loop for images in product.images should look like this:</p>
<pre><code>{% for image in product.images %}
<li class="grid-item medium--down-one-quarter large--one-quarter">
<a href="{{ image.src | img_url: 'master' }}" class="fancy_group" rel="group1"></a>
<a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</code></pre>
<p>Why did I just put in this dummy link? Because we need a way to tell Fancybox which links are all part of the same group ('group1', in this case). I couldn't simply change the link wrapping the actual thumbnail image because then clicking that thumbnail would open a lightbox instead of changing the featured image above the thumbnails.</p>
<p>Something to note: This gallery option is going to let your visitors scroll through a
lightbox gallery of all the product photos on the screen. This means that the featured image
is going to show up twice in that gallery because it also appears in the list of thumbnails. Just a heads up!</p>
<h4>About image sizes</h4>
<p>In this setup, I've chosen 'master' for the image size to dispaly in the lightbox. That
is the largest product image size available - which is currently 2048x2048. If you are interested
in what your other options are, check out the <a href="http://docs.shopify.com/themes/liquid-documentation/filters/url-filters#size-parameters">parameters available here</a>.</p>
<h2>Step 5: Modifiying our shop.js file</h2>
<p>One of the last things we need to think about is the fact the "featured image", the largest image at the top, is going to change everytime a visitor click a thumbnail image. Therefore, we need
to update the <code><a></code> tag around the featured image everytime the featured image changes.</p>
<p>Go to your <strong>shop.js</strong> file and find the <code>timber.productImageSwitch</code> function. This should be on line 253 if you haven't done any code changes to this file before. You are going to add some code right before the "on click" event ends. You can replace the whole <code>productImageSwitch</code> function with the following:</p>
<pre><code>timber.productImageSwitch = function () {
if ( timber.cache.$thumbImages.length ) {
// Switch the main image with one of the thumbnails
// Note: this does not change the variant selected, just the image
timber.cache.$thumbImages.on('click', function(evt) {
evt.preventDefault();
var newImage = $(this).attr('href');
timber.switchImage(newImage, null, timber.cache.$productImage);
//New link for Fancy image
var $fancyImage = $('#fancy_image');
if ($fancyImage) {
var fancyLink = newImage.replace('_large.', '.');
$fancyImage.attr('href', fancyLink);
}
});
}
};
</code></pre>
<h2>Next steps?</h2>
<p>After you've implemented Fancybox version 1.3.4 as detailed above, you may want to
experiment with the <a href="http://fancybox.net/api">different options available</a>.</p>
<p>In that that block of script we inserted in at the bottom of theme.liquid is where you can
add different options, or change the value of them. Don't like the overlay? Just change it's value
to false. Wish people could endlessly cycle through your gallery? And <code>'cyclic' : true</code> to the list of parameters:</p>
<pre><code> $("a.fancy_group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'cyclic' : true
});
</code></pre>
<p>Also, now that you have Fancybox installed, you can easily add a lightbox effect
to other images on your website - not just product images. We have <a href="http://docs.shopify.com/manual/configuration/store-customization/colors-and-images/add-a-lightbox-to-all-images">documentation
online here</a> about how to set that up, but you've already done about 80% of the work.
You'll just need to be sure the images you want lightboxed are wrapped in an <code><a></code> tag with the attributes id="fancy_image" and href="{{ the url of the image you want to dispaly }}".</p>
<p>As I said, this customization is fairly involved, so I strongly recommend attempting it on <a href="http://docs.shopify.com/manual/your-website/themes/export-duplicate-delete-themes#duplicate-theme">a duplicate of your theme</a>.</p>
<p>Best of luck!</p>
</article>
</div>