Thunderbird Extensions

External Editor

Yamb

Apple - mac

Web iPhoto Access

Donation
Make a donation to help WiPhA development

Search




Preferences
Connect again
---

Your user name :

Your secret code

 Count of members 123 members


Connected :

(nobody)
Visits

 2073893 visitors

 19 visitors online

Fresh News
Private
Slideshow test
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

Anonymous

visitor
Any possibility of integrating fancybox (http://fancybox.net) 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!
Cheers
  Post an answer  Top

[]   

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

Globs

Administrator

 Hi,

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

Anonymous

visitor
 OK, I've done it, and it works well...
Here are the changes to make...- install fancybox in 3rdparty folder (https://github.com/fancyapps/fancyBox/zipball/v2.1.4)- update prototype library to 1.7.1 also in 3rd party folder (the one currently used was a bit buggy and posed problems) : http://prototypejs.org/download
None we need to modify some templates in the templates folder.
header.tpl, add the following lines just before the 
Code : xhtml 
</head>
 add: 
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 
</body>
  
Code : xhtml 
{literal}
<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 );
</script>
{/literal}
 
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}
 
with
 
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…
Cheers
Write to Guigui   Post an answer  Top
Answer n° 3
--------
01/02/2013 @ 21:19
by Guigui

Anonymous

visitor
 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...
Cheers
Write to Guigui   Post an answer  Top
Answer n° 4
--------
01/02/2013 @ 21:29
by Guigui

Anonymous

visitor
 Sorry, me again...
Actually I found a way... When including fancybox in the head, do it before the prototype.js include, not after...
Cheers
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 ^