MaxiGallery and FancyBox (still one issue)

1,161 Posts

Photowebmax Reply #1, 17 years, 9 months ago

OK,

I have successfully created a test gallery using the Thickbox script and it does not conflict with the jQuery nav system I am using.

I am attempting to create another test gallery using the Fancybox script (see: http://fancy.klade.lv/). AFAIK, to use this script you need the noConflict addition to get the jQuery to behave with the Mootools system. I think I got this part to work. After trying a couple of changes I can now click on the new Fancybox gallery items and not get the jQuery conflict. But the Fancybox is not activating. When I click on the thumbnails the full size images appear in a blank window.

* I created a new template using the Fancybox script
* I added the Fancybox CSS to my template CSS file.
* I added all the Fancybox images to my template images folder.
* I added the Fancybox js to my template js folder.

I am using the following in the head of the Fancybox gallery template:

<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>



<! nav javascript starts here! >
<script>
jQuery(function() {
      // set opacity to nill on page load
       jQuery("ul#topnav span").css("opacity","0");
      // on mouse over
     jQuery("ul#topnav span").hover(function () {
         // animate opacity to full
         jQuery(this).stop().animate({
            opacity: 1
         }, 'slow');
      },
      // on mouse out
      function () {
         // animate opacity to nill
         jQuery(this).stop().animate({
            opacity: 0
         }, 'slow');
      });

   });
</script>
<! nav javascript ends !>

 <script type="text/javascript" src="assets/templates/phototest/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/templates/phototest/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$(div.image_thumb a").fancybox({ 'hideOnContentClick': true });
		}); 
	</script>

The call I am using on this test page is the following: [!MaxiGallery? &galleryPictureTpl=`mg_fancybox_galleryPictureTpl` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!

I have a chunk called mg_fancybox_galleryPictureTpl with the following code:

<li>
    <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="fancybox" rel="gallery">
        <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
        [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
    </a>
    [+maxigallery.picture.title:isnot=``:then=`
        <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
        </p>
    `+]
</li>

Again, I know I am missing something? I am using the same kind of chunk and call that I am using with the Thickbox script. The test images I uploaded into this test gallery with the Maxigallery function are all there with no problems. The problem is that clicking on the thumbnails will open the full size images in a blank window instead of with the Fancybox effects...

Thanks!

Max

4,205 Posts

dev_cw Reply #2, 17 years, 9 months ago

I think your problem is here:

$(div.image_thumb a").fancybox

You are missing the opening " so everything after the existing " is seen as a strng and does not get executed.

Also, the code above is looking for a <div class="image_thimb"><a href...> to be clicked. For your tpl it should be:

$("a").fancybox

The code for fancy should be somethng like this:

 <script type="text/javascript" src="assets/templates/phototest/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/templates/phototest/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$("a").fancybox({ 'hideOnContentClick': true });
		}); 
	</script>

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #3, 17 years, 9 months ago

Shane,

Forgive me, I don’t get this yet. The php is looking for "a", right? I am not clear on what "a" should be? A chunck, its own template or part of the CSS file?

4,205 Posts

dev_cw Reply #4, 17 years, 9 months ago

That is jQuery javascript not php. The "a" is the a (anchor) tag in html as in: <a href="http://link">link</a>. So "a" to jQuery = <a></a> in html. That is the key beauty of jQuery, the syntax is just like the way css reads the html tags.

$("a").fancybox({ 'hideOnContentClick': true });

This line is identifying which html element, in this case a link or anchor <a> element, will run the fancybox function and that the hideOnContentClick parameter is set to true.

Actually you should be more specific in the call to say that only specific links are to work with fancy by stating that only links in a list <li> will activate fancybox:

$("li a").fancybox({ 'hideOnContentClick': true });

Or be even more specific and say that only link an unordered list that has a class of image_gallery will work with fancy:

$("ul.image_gallery a").fancybox({ 'hideOnContentClick': true });

So to answer the question "a" is an html element that will trigger the event. If you leave it simply "a" every link will activate fancy so it is better to be more specific.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #5, 17 years, 9 months ago

After posting that I realized that was a dumb question, but I first thought "a" was a horthand for some code...

I have this now:

 <script type="text/javascript" src="assets/templates/phototest/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/templates/phototest/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$("ul.image_gallery a").fancybox({ 'hideOnContentClick': true });
		}); 

	</script>

In the noConflict should the $ be replaced with jQuery ?

The Fancybox is not working though...

4,205 Posts

dev_cw Reply #6, 17 years, 9 months ago

Did you edit the Tpl to reflect the specificity in the jQuery (Fancy) call? Since you are specifying that the click will be in "ul.image_gallery a"
Therefore the <ul> element would need to have a class of .image_gallery. I don’t knw which MaxiGallery template to edit to get the outer <ul> element. I recommend changing your existing tpl to include the class in the <li> element as in:

<li class="image_gallery">
    <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="fancybox" rel="gallery">
        <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
        [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
    </a>
    [+maxigallery.picture.title:isnot=``:then=`
        <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
        </p>
    `+]
</li>

Then the fancy call to:

 <script type="text/javascript" src="assets/templates/phototest/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/templates/phototest/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$("li.image_gallery a").fancybox({ 'hideOnContentClick': true });
		}); 

	</script>

In the noConflict should the $ be replaced with jQuery ? No, in this case we are defining that $ is an alias for jQuery in this line:

jQuery(document).ready(function($)

If we wanted to use the jQuery prefix it would be:

jQuery(document).ready(function()

The difference is the ($), in the first case we can still use $, in the second we would need to use jQuery.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #7, 17 years, 9 months ago

Thanks Shane,

I am think I am closer but its still not working.

The Tpl I create with that code can be a chunk, right? Or does it need to go inside the MaxiGallery templates folder? When I tried creating the Thickbox gallery I used it as a chunk and it seemed to work fine.

As to the <ul> that contains the "ul.image_gallery a": I looked at some of the MaxiGallery templates and I don’t see it. Would this be in the default CSS file or perhaps the CSS for the Fancybox?

To review, the gallery test page I am using (Fancybox Template) has the following in the head:

        <script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>



<! nav javascript starts here! >
<script>
jQuery(function() {
      // set opacity to nill on page load
       jQuery("ul#topnav span").css("opacity","0");
      // on mouse over
     jQuery("ul#topnav span").hover(function () {
         // animate opacity to full
         jQuery(this).stop().animate({
            opacity: 1
         }, 'slow');
      },
      // on mouse out
      function () {
         // animate opacity to nill
         jQuery(this).stop().animate({
            opacity: 0
         }, 'slow');
      });

   });
</script>
<! nav javascript ends !>

 <script type="text/javascript" src="assets/templates/phototest/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/templates/phototest/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$("li.image_gallery a").fancybox({ 'hideOnContentClick': true });
		}); 

	</script>

The chunk that calls the Tpl is in a MODx chunck called mg_fancybox_galleryPictureTpl and contains:

<li class="image_gallery">
    <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="fancybox" rel="gallery">
        <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
        [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
    </a>
    [+maxigallery.picture.title:isnot=``:then=`
        <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
        </p>
    `+]
</li>

And finally the test page snippet call uses this:

[!MaxiGallery? &galleryPictureTpl=`mg_fancybox_galleryPictureTpl` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]

So, my guess its that <ul> or I am using the Tpl incorrectly or some other obvious newby error?

Appreciate the help!

4,205 Posts

dev_cw Reply #8, 17 years, 9 months ago

Looks like it should be working. Can you send me a link (if it is not local) so I can see the output? Must be something we are missing. The <ul> was taken out of the equation when we changed the fancy call to look for the <li> element so that is not a problem.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #9, 17 years, 9 months ago

Thanks for checking.

Its local right now though...

4,205 Posts

dev_cw Reply #10, 17 years, 9 months ago

Then paste the output from the maxigallery call with the images, we might be able to spot the problem or at least confirm if the tpl is being applied correctly.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]