forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 plugins => Topic started 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/
-
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
-
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.
-
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
<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
<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.
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Would it be easy to do ?
-
Can anyone give me a hint ?
-
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.
-
Thank you for trying.
-
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:
"<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">"
and replace with:
"<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:
<!-- Begin IE6 support -->
Add Before
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Find:
{JAVASCRIPT}
Add After:
<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:
</body>
Add before:
<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...
-
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.
-
I agree :)
-
Done.