How to enable Fancybox on pages

Mike_Hayes
New Member
21 0 0

Hi everyone,

I am wanting to add a fancybox to the images on my pages. Is there an easy way to do this?

I need it to look like the way my product images pop up when they are clicked.

Thanks,

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Hello Mike,

This is your solution right there: http://docs.shopify.com/manual/configuration/store-customization/add-a-lightbox-to-all-images.

Let me know if you have any questions, or need a detailed walk-through for your Minimal theme.

 

Mike_Hayes
New Member
21 0 0

Hi Caroline,

Thanks for the reply. Although when i opened my theme.liquid i could not find

{% if template contains 'product' and settings.main_image_display == 'Lightbox' %} ... {{ 'jquery.fancybox-1.3.4.pack.js' | asset_url | script_tag }} {% endif %}
 

The page i need them on is - https://beachlife-distribution.myshopify.com/pages/media

Thanks,

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Your theme does not wrap the include of the plugin in any conditional. So you can skip that step.

Which of your page templates is used on this page:  http://beachlife-distribution.myshopify.com/pages/media ? You have 8 different page templates. Let me know!

Don't forget the step where you need to replace some code in the JavaScript with some other, suitable for the fancybox plugin. Your theme uses the fancybox plugin.

 

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

You need to replace this:

.colorbox( { maxWidth:"95%", maxHeight:"95%", scalePhotos:true} );

With that:

.fancybox({ 'hideOnContentClick': true });

in theme.liquid.

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Your Media page is using page.liquid, I just checked.

So in that file, replace this:

{{ page.content }}

with:

<div class="rte">{{ page.content }}</div>

That limits the play field for the JavaScript.

0 Likes
Mike_Hayes
New Member
21 0 0

Thanks for the reply.  I replaced the .colorbox with the .fancybox code.

The page template i am using is the standard page.liquid template.

It's still not working unfortunately.

0 Likes
Mike_Hayes
New Member
21 0 0

Sorry its working now!  Also is there anyway to add a vimeo video into the fancybox?

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

It works!

http://beachlife-distribution.myshopify.com/pages/media

Some images are too small to begin with, so they are not clickable. But those who are large enough are!

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5704 1 341

Instructions for videos are here: http://fancyapps.com/fancybox/#instructions

Look for this:

Youtube (iframe)

 

0 Likes