CG Products + Fancy/LightBox SOLVED

deschnell · Post by **deschnell** » Fri Sep 30, 2011 11:02 pm

I've got a site I'm setting up which is using Products, and I want the product image to show with fancybox/lightbox, etc when clicked.
I initially set this site up about 3+ years ago, have changed and modified it a few times since then, now in development again (to hopefully finish it... long story). the Detail template for the products has been modified with:

Code: Select all

{if $field->type == 'image' && isset($field->thumbnail)}
      
<a href="{$entry->file_location}/{$field->value}" rel="lightbox"><img src="{$entry->file_location}/{$field->thumbnail}" alt="{$field->value}"/></a><br /> (Click Image to Enlarge)
       {/if}

Anyway - I'm sure there's a conflict with my js librairies being called and used, and was wondering how I can make this work smoothly.
I'm using slideviewer on the pages, plus products, plus fancybox - really the only JS needed, but they need to work together. I seem to recall making them work in the past... just can't remember what I did. Any pointers or tips?
(seems like this list of installed modules is showing more CG based modules than what show in the module manager?)
Thanks...

the site is live (though incomplete) ex. here:
http://lakelandcommunication.com/index. ... eturnid=32

uniqu3 · Post by **uniqu3** » Fri Sep 30, 2011 11:28 pm

Well you also have to trigger the fancybox script for your image element.
Add a class to your link element around image like <a class="my_fancybox"...

Add this inside your <head> or before <__body>

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function() {
	$("a.my_fancybox").attr('rel', 'lightbox').fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7
	});
});
</__script>

read more about http://fancybox.net/howto

deschnell · Post by **deschnell** » Fri Sep 30, 2011 11:41 pm

that's it! Thanks!

fearmydesign · Post by **fearmydesign** » Sat Mar 10, 2012 7:39 am

This was very helpful, however I am wondering if you can help me figure this out... the fancybox seems to be working but it seems to be interfering with my other jquery for the tabs and I can't figure out what or how to fix it. I have tried isolating which jquery file but no luck, I also added the noConflict code, but nothing...

I followed the instructions on this thread because I was trying to show my Products picture in a fancybox and it works, but only when I remove all the other stuff for the jquery tabs.

Can you please help me take a look?

The link is: http://www.tansaturnstile.com/Products/ ... ginal.html

You will see that when you clcik on the small turnstile image, it opens up another page (not the fancybox), and when you click on the tabs, it jumps to the home page...

Thank you

uniqu3 · Post by **uniqu3** » Sat Mar 10, 2012 7:56 am

You have jQuery 3x in your Template, you need it only once.

1.

Code: Select all

<__script__ src="/javascripts/jquery-1.7.1.min.js" type="text/javascript"></__script>

2.

Code: Select all

 <__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></__script>

3.

Code: Select all

<__script__>

   !window.jQuery && document.write('<__script__ src="/javascripts/test/jquery-1.4.3.min.js"><\/script>');

</__script>

fearmydesign · Post by **fearmydesign** » Sat Mar 10, 2012 3:40 pm

uniqu3 wrote:You have jQuery 3x in your Template, you need it only once.

Thank you for your response... I removed the first, but it still not working: In fact, I tried several combinations (i.e. removing the first, then the second, the third, putting back the second, etc.) but none worked... what else do you think I can try? and which of those 3 versions would you suggest I maintain?

Once again, thank you for your help.

uniqu3 · Post by **uniqu3** » Sat Mar 10, 2012 3:57 pm

You should go with latest that would be 1.7.1 and have it above other scripts you are using.

fearmydesign · Post by **fearmydesign** » Sat Mar 10, 2012 8:36 pm

uniqu3 wrote:You should go with latest that would be 1.7.1 and have it above other scripts you are using.

Thank you, but I don't understand why its not working... the 1.7.1 is now 1st in line at the top and I removed the others. Below I am attaching my CMSMS Head Template part of the code to see if there is something I am missing. FYI - I also tried removing the <__script__>!window.JQuery... etc </__script> part but still didn't work, am leaving it on here just so you can see if I missed something, and from the way I understand it, the fancybox needs that script part to work... right?

Code: Select all

<head>
<title>{sitename} - {title}</title>

{cms_stylesheet}

<__script__ src="/javascripts/jquery-1.7.1.min.js" type="text/javascript"></__script>
<__script__ src="/javascripts/jquery.easing.1.3.js" type="text/javascript"></__script>
<__script__ src="/javascripts/jquery.easytabs.min.js" type="text/javascript"></__script>
<__script__ src="/javascripts/jquery.hashchange.min.js" type="text/javascript"></__script>

<__script__ type="text/javascript" src="/javascripts/test/fancybox/jquery.mousewheel-3.0.4.pack.js"></__script>
<__script__ type="text/javascript" src="/javascripts/test/fancybox/jquery.fancybox-1.3.4.pack.js"></__script>
<link rel="stylesheet" type="text/css" href="/javascripts/test/fancybox/jquery.fancybox-1.3.4.css" media="screen" />


{literal}

<__script__>
   !window.jQuery && document.write('<__script__ src="/javascripts/jquery-1.7.1.min.js"><\/script>');
</__script>

<__script__ type="text/javascript">
$(document).ready(function() {
   $("a.my_fancybox").fancybox({
      'speedIn':      300,
      'speedOut':   300,
      'overlayColor':   '#000',
      'overlayOpacity':   0.7
   });
});
</__script>

<!-- NO CONFLICT -->
<__script__ language="JavaScript" type="text/javascript">
jQuery.noConflict();
</__script>

{/literal}

{global_content name='analytics'}
{metadata}

</head>

Thank you for your help, I really don't know what's going on with this...

uniqu3 · Post by **uniqu3** » Sat Mar 10, 2012 9:36 pm

Well Firebug tells mit that "$" is unknown function.
You can try something like

Code: Select all

var $ = jQuery.noConflict();
$(document).ready(function() {
   $("a.my_fancybox").fancybox({
      'speedIn':      300,
      'speedOut':   300,
      'overlayColor':   '#000',
      'overlayOpacity':   0.7
   });
});

fearmydesign · Post by **fearmydesign** » Mon Mar 12, 2012 12:18 am

uniqu3 wrote:Well Firebug tells mit that "$" is unknown function.
You can try something like
Code: Select all
var $ = jQuery.noConflict();
$(document).ready(function() {
   $("a.my_fancybox").fancybox({
      'speedIn':      300,
      'speedOut':   300,
      'overlayColor':   '#000',
      'overlayOpacity':   0.7
   });
});

Thank you, this worked perfect!...

CMS Made Simple Forums

CG Products + Fancy/LightBox SOLVED

CG Products + Fancy/LightBox SOLVED

Re: CG Products + FancyBox

Re: CG Products + FancyBox - solved

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED

Re: CG Products + Fancy/LightBox SOLVED