Add a new Image Lightbox Effect eg. Fancybox

iamrobert
Topic Author
Offline
Platinum Member

11 years 8 months ago - 11 years 8 months ago #27242 by iamrobert

Add a new Image Lightbox Effect eg. Fancybox was created by iamrobert

Hi,

I have been using Jquery Fancybox alot:
fancyapps.com/fancybox/

So - I wanted to add it to the Flexicontent image plugin - so my images would pop up.

1. Add the popup option to image.xml (plugins/flexicontent_fields/images/image.xml)

Find on line 102:

Code:

<field name="popuptype" type="list" default="1" label="FLEXI_FIELD_IMAGE_POPUP_TYPE" description="FLEXI_FIELD_IMAGE_POPUP_TYPE_DESC">
				<option value="1">FLEXI_FIELD_IMAGE_MULTIBOX</option>
				<option value="2">FLEXI_FIELD_IMAGE_ROKBOX</option>
				<option value="3">FLEXI_FIELD_IMAGE_JCEMEDIABOX</option>
</field>

2. Add your value before </field>:

Code:

<option value="4">FANCYBOX</option>

3. Open image.php (plugins/flexicontent_fields/images/image.php)

Scroll Down to line 422 looking for $popuptype == 3:

Code:

} else if ($usepopup && $popuptype == 3) {
				$field->{$prop} = '
					<a href="'.$srcl.'" class="jcepopup" rel="'.$field->item_id.'" title="'.($desc ? $desc : $title).'">
						<img src="'. $src .'" alt ="'.$alt.'" />
					
					';

After this install your code:

Code:

// Fancybox
               } else if ($usepopup && $popuptype == 4) {
            $field->{$prop} = '
               <a href="'.$srcl.'" class="fancybox-thumb" data-fancybox-group="gallery"  title="'.$alt.'">
                  <span class=zoom"></span><img src="'. $src .'" alt ="'.$alt.'" />
               
               ';

You need to insert the jquery in your template by following the Fancybox website code.

I used the following code at the bottom of my template:

Code:

<script type="text/javascript">

        jQuery.noConflict();

		jQuery(document).ready(function() {

			jQuery(".fancybox-thumb").fancybox({

		prevEffect	: 'none',

		nextEffect	: 'none',

		helpers	: {

			title	: {

				type: 'inside'

			},

			overlay	: {

				opacity : 0.8,

				css : {

					'background-color' : '#000'

				}

			},

			thumbs	: {

				width	: 50,

				height	: 50

			}

		}  

			});

		});	

  </script>

Hope somebody finds this helpful.

Robert

Last edit: 11 years 8 months ago by iamrobert.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

11 years 8 months ago #27244 by ggppdk

Replied by ggppdk on topic Add a new Image Lightbox Effect eg. Fancybox

You load JS files for fancybox inside the image field? or in another file?

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

iamrobert
Topic Author
Offline
Platinum Member

11 years 8 months ago #27250 by iamrobert

Replied by iamrobert on topic Add a new Image Lightbox Effect eg. Fancybox

Hi,

The css & js are in my template files as I am trying to put all my scripts into 1 js file.

At the moment I am using the zurb foundation framework for my templates:

foundation.zurb.com/

So - I am putting my css in the app.css file, and the js in the scripts.js file.

Example (still in dev):

ap2.wedesigntaipei.com/index.php/case-studies/mechanix-wear

Robert

Please Log in or Create an account to join the conversation.

micker
Offline
Administrator

11 years 8 months ago #27262 by micker

Replied by micker on topic Add a new Image Lightbox Effect eg. Fancybox

good tips
thanks

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.