Faire un don pour aider au developpement de WiPhA



Se reconnecter

Votre nom (ou pseudo) :

Votre code secret

 Nombre de membres 123 membres

Connectés :

( personne )

 2049403 visiteurs

 5 visiteurs en ligne

forum.gifForum - Web iPhoto Access - Sujet n°344

Forum - Forum
Web iPhoto Access - Web iPhoto Access

actif  Sujet n° 344  Fancybox integration

le 08/01/2013 @ 23:48
par 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!
  Poster une réponse  Haut


Réponse n° 1
le 10/01/2013 @ 05:37
par 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.
Ecrire à Globs   Site web Globs Poster une réponse  Haut
Réponse n° 2
le 01/02/2013 @ 18:32
par 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…
Ecrire à Guigui   Poster une réponse  Haut
Réponse n° 3
le 01/02/2013 @ 21:19
par 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...
Ecrire à Guigui   Poster une réponse  Haut
Réponse n° 4
le 01/02/2013 @ 21:29
par Guigui


Sorry, me again...
Actually I found a way... When including fancybox in the head, do it before the prototype.js include, not after...
Ecrire à Guigui   Poster une réponse  Haut
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message   -   Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter
Catégories de discussion  Forum 

^ Haut ^