Thunderbird Extensions
Apple - mac
Make a donation to help WiPhA development



Connect again

Your user name :

Your secret code

 Count of members 123 members

Connected :


 2073841 visitors

 11 visitors online

forum.gifForum - Web iPhoto Access - Topic #344

Forum - Forum
Web iPhoto Access - Web iPhoto Access

active  Topic # 344  Fancybox integration

08/01/2013 @ 23:48
by Guigui



Any possibility of integrating fancybox ( in Wipha?
It's all html5, works on all browsers and has quite a cool look to it!
That would definitely make wipha look super cool!
  Post an answer  Top


Answer n° 1
10/01/2013 @ 05:37
by Globs




I probably won't do this myself before a very long time, but if somebody provides a patch with no loss of functionality, I'll be happy to integrate it.
Write to Globs   Website Globs Post an answer  Top
Answer n° 2
01/02/2013 @ 18:32
by Guigui


OK, I've done it, and it works well...
Here are the changes to make...- install fancybox in 3rdparty folder ( update prototype library to 1.7.1 also in 3rd party folder (the one currently used was a bit buggy and posed problems) :
None we need to modify some templates in the templates folder.
header.tpl, add the following lines just before the 
Code : xhtml
Code : xhtml
<!-- Add jQuery library -->
<script type="text/javascript" src="3rdParty/fancybox/jquery-1.9.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="3rdParty/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="3rdParty/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="3rdParty/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="3rdParty/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="3rdParty/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="3rdParty/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="3rdParty/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="3rdParty/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Also in header you need to make sure that the prototype script call targets the new prototype library
footer.tpl, add the following lines before the  
Code : xhtml
Code : xhtml
<script type="text/javascript">
    ( function($) {
        // we can now rely on $ within the safety of our "bodyguard" function
        $(document).ready( function() { $('.fancybox').fancybox({ type:'image' } ); });
    } ) ( jQuery );
finally modify photopage.tpl to activate fancybox on pictures. Replace that line 
Code : xhtml
{if $photos[$photoId].MediaType eq "Image"}        <a href="{$smarty.server.SCRIPT_NAME}?sl={$photoId}">{/if}
Code : xhtml
{if $photos[$photoId].MediaType eq "Image"}        <a class="fancybox" rel="group" href="{$smarty.server.SCRIPT_NAME}?fs={$photoId}">{/if}
Be careful, there also a difference in the link, just copy paste…
Hope this helps someone…
Write to Guigui   Post an answer  Top
Answer n° 3
01/02/2013 @ 21:19
by Guigui


My bad, please don't do this....
It breaks the login page. I was logged in during all my testing and didn't realize...
For some reasons, it triggers the javascript needed warning...
Can't figure out why...
Write to Guigui   Post an answer  Top
Answer n° 4
01/02/2013 @ 21:29
by Guigui


Sorry, me again...
Actually I found a way... When including fancybox in the head, do it before the prototype.js include, not after...
Write to Guigui   Post an answer  Top
active topic active   closed topic closed   Sticky Sticky   New New message   -   Correct Correct message   Close Close topic   Make sticky Make sticky
Forum Topic  Forum 

^ Top ^