Module: Fancybox Integration - v.1.5

Hi -- I installed the module, but on the configuration screen can't figure out what I need to enter in for the "Target Link Element" field as shown here: http://screencast.com/t/OpUK7kMsRvMw. Do I just leave as is? If so, then for some reason when I click on images in my gallery the fancy box doesn't show up. I just get the standard "View Full Size" as shown here.

Thanks,

Marc

@shecter: please try "#g-item #g-photo .g-fullsize-link" (no quotes)
Please note, it is still work in progress, since there are lot of options to cover
Default state is for GD theme

@dmolavi: yes, forgot to change this. Thanks!

i have not tested it with default wind theme, yet, so i may be missing something
does it work for you if you wisit my web-site?
and,no, no additional code need to be installed - check the code of the page to see if fancybox refernces are there

PS. did you turn off index.php by the g3 for your site?

Look here - http://photo.dragonsoft.us/Hawaii/bigisland/Diving/2008_03190126
both shadowbox and fancybox would act the same - you click on the image
something in your configuration is not right, because [Full View Link] is part of the sidebar and not an image itself
what 3rds party modules you have installed?

for EDIT coment: again, something is wrong there since it is a caption/image name should be in the bottom area...

Oh! well, it is hard to say how each of this modules can interfere/hack the theme
you can try disabling 3rd party modules one-by-one and see which causes the problem
I would suggest to try from "download" one...

Wind or GD Wind theme, they both are based on the same JS structure
you have to disable default preview functionality of the theme
To do so:

• in page.html.php comment out line
  <?= $theme->script("gallery.show_full_size.js") ?>
• in photo.html.php comment out lines
  $(".g-fullsize-link").click(function() {
  $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]);
  return false;
  });
• in fancybox module configuration, specify .g-fullsize-link as a target

PS. Added to module's description page

inside GD theme, you would need to wait for 2.4.4 which is coming out soon

Hi,

as an FYI to anyone else having a similiar problem (like me). I discovered that the Photo Annotation module was causing the error of seeing the "view full size" on the photo. I'm guessing it is because of layers in the page? I used the "module order" module to see if re-organising the modules would make any difference - unfortunately not

Update:
I've narrowed it down to the file items_face.php located in /modules/photoannotation/models. I don't know anything about kohana, but I'll update if I find a solution.

Hope it helps someone.

For arrows to work, Fancybox need to be started in Image gallery mode - see section here
for that special code need to be introduced to the photo.htnl.php
you can refer to GreyDragon theme for more details

Experiment with this. This is direct snippet from my theme, so you may need to adjust it a little.

    <? $siblings = $item->parent()->children(); ?>
    <? $siblings_count = count($siblings) - 1; ?>
    <div class="g-resize" >
    <? for ($i = 0; ($i <= $siblings_count); $i++): ?>
      <? if ($siblings[$i]->rand_key == $item->rand_key): ?>
         <a title="<?= $theme->bb2html(html::purify($item->title), 2) ?>" <?= ($include_single)? "class=\"g-sb-preview\"" : "target=_blank;"; ?> <?= ($include_list)? "rel=\"g-preview\"" : null; ?> href="<?= (access::can("view_full", $item))? $item->file_url() : $item->resize_url(); ?>">
         <?= $item->resize_img(array("id" => "g-photo-id-{$item->id}", "class" => "g-resize", "alt" => $_title)) ?>
         </a>
      <? else: ?>
        <? if ($include_list): ?>
          <? if (!$siblings[$i]->is_album()): ?>
          <a title="<?= $theme->bb2html(html::purify($siblings[$i]->title), 2) ?>" class="g-sb-preview g-hide" rel="g-preview" href="<?= (access::can("view_full", $siblings[$i]))? $siblings[$i]->file_url() : $siblings[$i]->resize_url(); ?>">&nbsp;</a>
          <? endif; ?>  
        <? endif; ?>
      <? endif; ?>
    <? endfor; ?>
</div>

I do not know if it was you or not, but there is some info from FancyBox forum on how to specify list of images to be displayed in FB without invisible links

http://groups.google.com/group/fancybox/browse_thread/thread/c8000121907eb362

1.3 seems to have broken... everything.
1.2 was working mostly fine with Dark Canvas theme (same php preview edits as Wind). In 1.2 the image title never worked, it was always "View full size". I upgraded to 1.3 so I could hide titles, and...

1.3 now opens the image directly in the browser, as if it was just a link to a jpg.

To install 1.3, I deactivated the module, deleted the module directory, unziped the new one, re-enabled the module, saved the settings.

Over here FancyBox (1.3) is not working, either. Using GD 2.7.2, when I click on a photo or hit the fullscreen icon, I get the fullsize photo on white bg. I have disabled all modules except Info, Kbd Nav and Thumb Nav., but no improvement.

G3 shows this:

fancybox settings a:0:{}

I reset and saved FB default settings, but my fancybox-init.js is smaller than the original one:

// ******* Auto-generated file. Please do not change. ***

$(document).ready(function() {
  $("a.g-sb-preview").fancybox({
    ,'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {         return 'Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' : ' + title;
      }
  });

  $("a.g-fullsize-link").fancybox({
    ,'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {         return 'Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' : ' + title;
      }
  });

});

Do you have a clue what's going on here?

I did, but no change...

OK, after changing the file I de-/installed the plugin and now it works... great!

Thanks a lot!

Serge,

(1) I switched from Shadowbox to Fancybox and I can't see how to enable "Image Gallery" to get the navigation arrows after opening the image in Fancybox.

(2) The "elastic" setting doesn't work for me. It's not bouncing when opening or closing. It works when I go to your demo page though.

(3) Using Firebug, I'm getting this script error, even though I deleted Shadowbox from the modules directory:

Shadowbox is not defined
Line 57
Shadowbox.setup("a.g-fullsize-link", {player: 'img'});
58 Shadowbox.setup("a.g-sb-preview", {player: 'img', gallery: "preview", animate: true, continuous: true, counterType: "skip", animSequence: "wh", slideshowDelay: 7 });
59 } catch (e) { }

Hello,

Thank you for this module.
I just have one "problem"/request: currently, when the visitors click on the picture to see it in fullscreen, they download the fullsize image. As most of my pictures are photos of 7MB, the display is very slow.
So, I would like to change something to use the resized picture in full screen view.
Should I change something in the FancyBox module or somewhere else in the code/theme? I already tried to change the value of Target (but cannot find the correct value) and I don't want to use the permission "Deny full size picture".

Info:
Gallery 3.41
Theme : GreyDragon 2.7.5
Module : Fancybox 1.4
OS: Linux 2.6.18 (CentOS 5.5)
Web server: Apache 2.2.14 + PHP 5.3.1

Thank you,

Hi,

What does the cyclic navigation do? And does it work with the default Wind theme?

-Marc

Yes I always save the setting of mods right after I install them.

That's pretty much how mine is too but I can't get the elastic effect to work or the arrows for the navigation to show. I know it's not my browser because the elastic effect and the navigation arrows work on your demo site:

http://www.dwdallam.com/G3_DWDALLAM/index.php/Archive/Landscape/13x7_2006_12_03_HdPtSS_116
Se here for what I mean.

Thank you Serge, it works fine when changing lines 65 and 81(to also use the resized picture when pressing left or right button).

Good job for your great theme and modules.

hm,

well, for once photo.html.php does not produce list of hidden image items, so there is no gallery mode and so you have Image 1/1... there is no next or prior image
this would be the case if you set FancyBox mode in Theme's admin panel to Preview Only instead of Default
you do not allow visitors to see full image, so elastic would only mean that picture slides into center position

PS: I also looked at the page, there is an error in CSS definition
#fancybox-bg-n has progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/G3_DWDALLAM/modules/fancybox/core/fancy_shadow_nw.png/fancy_shadow_n.png', sizingMethod='scale')
notice that png file is referenced twice - should be just fancy_shadow_n.png

it seems like it should be for the mode you have selected
you do have elastic effect - when going from different photo orientation, photo resizes in "elastic" fashion
left corner effect... interesting, but I do not control it...

Ah-ha. well, you are looking for another option which I do not support right now - easingIn, easingOut

Some samples - 1, 2
I have understanding on what need to be done, but just did not have time to add support for it

For the example you are refering to settings are

("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'

version 1.5 is out:

• Added reminder to make sure that module is initialized before first use
• Optimized so that G3 does combine JS/CSS code

Sorry, it was the Fancybox option "Title Position (default: Outside)" set to Hide !
When set to "outside" Everything is working again... just PERFECT !

Vincent

I was just checking my 404 on my site and it has many issues with fancy box. So I must have missed a few steps. In looking at the install section, I need to include some lines of code. I am VERY new at this and not too well studied.

comment out is being referred to.

in page.html.php comment out line< ?= $theme->script("gallery.show_full_size.js") ?>
in photo.html.php comment out lines $(".g-fullsize-link").click(function() { $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]); return false; });
in fancybox module configuration, specify .g-fullsize-link as a target

I am looking for these lines to change, but are they even there or am I to write and insert them. If so, where.

i am using this with Gal 3.0.1 and grey dragon.