Fancybox plugin ?

[alainlizotte]

I would like to have a Fancybox plugin that enlarge the resized picture to full screen. But I want to keep the navigation original.

I have no coding skills so I was wondering if someone else would be interested in doing it...

http://fancyapps.com/fancybox/

[Αndré]

I don't know if you already searched our boards for solutions, so I suggest to have a look at those plugins:
- http://forum.coppermine-gallery.net/index.php/topic,62905.0.html
- http://forum.coppermine-gallery.net/index.php/topic,57424.0.html

[alainlizotte]

I tried both of them, but i'm not satisfied.

The popup picture is too small and/or the navigation menu is changed with those plugins.

I would like to keep the navigation page as is, but only modify the way the full screen picture is shown.

By default, the picture is not visible at 100% and is not centered.

That's why I would be interested in a Fancybox plugin


Currectly, the LightBox NotesFor.net plugin is the closest match.

[alainlizotte]

I don't understand how to do a plugin.

I would just need to do the following:

- disable the default popup script for the full size image

- load this script in the head

Code Select Expand

<script type="text/javascript" src="/javascript/jquery.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

- add this code in the body

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {
    $("a[href$='.jpg'],a[href$='.JPG'],a[href$='.PNG'],a[href$='.GIF'],a[href$='.png'],a[href$='.gif']").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
});

It is also possible to add a class to the image and call it in the fonction instead of all image formats.

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>


Would it be easy to do ?

[alainlizotte]

Can anyone give me a hint ?

[Αndré]

I just had a look at the official fancyBox documentation but wasn't able to get it to work. It always opened the image file directly. Maybe it's a conflict between the different jQuery versions.

[alainlizotte]

Thank you for trying.

[alainlizotte]

I finally succeeded!

First :
Remove the popup script:
http://forum.coppermine-gallery.net/index.php/topic,76406.0.html

Copy the function theme_html_picture from themes/sample/theme.php to your theme's theme.php file if it doesn't exist.
Then, find:

Code Select Expand

"<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">"


and replace with:

Code Select Expand

"<a id=\"fancybox\" href=\"{$CONFIG['fullpath']}{$CURRENT_PIC_DATA['filepath']}{$CURRENT_PIC_DATA['filename']}\">"

at both positions.


Second:
Upload Fancybox 1.3.4 to your server (version 2 won't work...)

Third:
In theme/yourtheme/template.htlm

Find:

Code Select Expand

<!-- Begin IE6 support -->

Add Before

Code Select Expand

<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Find:

Code Select Expand

{JAVASCRIPT}

Add After:

Code Select Expand

<script type="text/javascript" src="fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox-1.3.4/fancybox/jquery.easing-1.4.pack.js"></script>


Find:

Code Select Expand

</body>

Add before:

Code Select Expand

<script type="text/javascript">
$(document).ready(function() {

$("a#fancybox").fancybox({

        'hideOnContentClick':        true,
                'transitionIn'   :         'fade',
'transitionOut'   :     'fade',
'speedIn'   :     600,
'speedOut'   :     200,
'overlayShow'   :     true,
                'overlayColor'         :         '#000',
'overlayOpacity'     :         0.5
   
});

});
</script> -->


You should get something like this
http://www.lemordudurc.com/photos/displayimage.php?album=54&pid=5825#top_display_media


I hope somebody will be interested in this new modification.

It would be great to create a plugin now, but I really don't understand how...

[Αndré]

I suggest to merge step 1 and 4, i.e. add the ID already in step 1 and drop step 4. If you agree, I'll edit your post accordingly, as you don't have permissions to do that.

[alainlizotte]

I agree

[Αndré]

Done.