Don
Faire un don pour aider au developpement de WiPhA

Recherche




Préférences

Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret


 Nombre de membres 126 membres


Connectés :

( personne )
Visites

 2949378 visiteurs

 10 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

Anonyme

visiteur

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
  Poster une réponse  Haut

[]   

Réponse n° 1
--------
le 10/01/2013 @ 05:37
par Globs

Globs

Administrateur

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.
Ecrire à Globs   Site web Globs Poster une réponse  Haut
Réponse n° 2
--------
le 01/02/2013 @ 18:32
par Guigui

Anonyme

visiteur
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
Ecrire à Guigui   Poster une réponse  Haut
Réponse n° 3
--------
le 01/02/2013 @ 21:19
par Guigui

Anonyme

visiteur
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
Ecrire à Guigui   Poster une réponse  Haut
Réponse n° 4
--------
le 01/02/2013 @ 21:29
par Guigui

Anonyme

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