forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 plugins => Topic started by: alainlizotte on June 02, 2013, 07:46:19 pm

Title: Fancybox plugin ?
Post by: alainlizotte on June 02, 2013, 07:46:19 pm
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/
Title: Re: Fancybox plugin ?
Post by: Αndré on June 03, 2013, 01:43:44 pm
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
Title: Re: Fancybox plugin ?
Post by: alainlizotte on June 04, 2013, 07:05:39 pm
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.
Title: Re: Fancybox plugin ?
Post by: alainlizotte on July 06, 2013, 05:05:18 pm
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]
<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]
<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]
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>


Would it be easy to do ?
Title: Re: Fancybox plugin ?
Post by: alainlizotte on July 27, 2013, 11:30:59 pm
Can anyone give me a hint ?
Title: Re: Fancybox plugin ?
Post by: Αndré on August 20, 2013, 03:16:58 pm
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.
Title: Re: Fancybox plugin ?
Post by: alainlizotte on August 21, 2013, 12:16:03 am
Thank you for trying.
Title: Re: Fancybox plugin ?
Post by: alainlizotte on August 22, 2013, 04:44:36 am
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]
"<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]
"<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]
<!-- Begin IE6 support -->
Add Before

Code: [Select]
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Find:
Code: [Select]
{JAVASCRIPT}
Add After:
Code: [Select]
<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]
</body>
Add before:

Code: [Select]
<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...
Title: Re: Fancybox plugin ?
Post by: Αndré on August 22, 2013, 09:21:35 am
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.
Title: Re: Fancybox plugin ?
Post by: alainlizotte on August 22, 2013, 12:09:07 pm
I agree :)
Title: Re: Fancybox plugin ?
Post by: Αndré on August 22, 2013, 02:09:49 pm
Done.