Add a new Image Lightbox Effect eg. Fancybox

More
5 years 11 months ago - 5 years 11 months ago #27242 by iamrobert
Hi,

I have been using Jquery Fancybox alot:
http://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:
<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>:
<option value="4">FANCYBOX</option>

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

Scroll Down to line 422 looking for $popuptype == 3:
} 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:
// 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:
<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: 5 years 11 months ago by iamrobert.

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

More
5 years 11 months ago #27244 by ggppdk
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 review. Thanks!

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

More
5 years 11 months ago #27250 by iamrobert
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:

http://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):

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

Robert

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

More
5 years 11 months ago #27262 by micker
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.

More
5 years 11 months ago #27303 by Rehne
Hi,

iamrobert wrote: Hi,...

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

http://foundation.zurb.com/

...
Robert


just a note:
I recommend the use of bootstrap http://twitter.github.com/bootstrap/
or Kickstrap http://ajkochanowicz.github.com/Kickstrap/
as responsive front-end framework
because Bootstrap will be included in Joomla 3.0
http://www.joomlablogger.net/blog/joomla-news/twitter-bootstrap-will-be-included-in-joomla-30/
J3.0 demo: http://joomla30.joomlashine.com/

there's a basic/blank template for J2.5 with Bootstrap (as optional parameter
http://blank.vc

Regards

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

More
5 years 11 months ago #27309 by ggppdk
Rehne, thanks for the suggestion,

i have installed J3.0 alpha, i hope i 'll find time to test soon :D


-- 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 review. Thanks!

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

More
5 years 11 months ago #27355 by micker
good idea rehne

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.

Moderators: vistamediajoomlacornerggppdk
© 2018 Flexicontent. All Rights Reserved.