Globs site - Forum - Web iPhoto Access

Extensions Thunderbird

External Editor

Yamb

Apple - mac

Web iPhoto Access

Don

Recherche

Préférences

Se reconnecter
---

123 membres

Connectés :

( personne )

Visites

2049403 visiteurs

5 visiteurs en ligne

Nouvelles fraiches

Démo de photocast WiPhA

Les Oeuvres de Gehel

Personnel

Essai de diaporama
Anniversaire Alex

Forum - Web iPhoto Access - Sujet n°344

Forum - Forum
- Web iPhoto Access

Sujet n° 344	Fancybox integration
le 08/01/2013 @ 23:48 par Guigui 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

Réponse n° 1 -------- le 10/01/2013 @ 05:37 par 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.

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

Réponse n° 3 -------- le 01/02/2013 @ 21:19 par Guigui 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

Réponse n° 4 -------- le 01/02/2013 @ 21:29 par Guigui 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

sujet actif clos

sujet clos

Important! Nouveau

Nouveau message -

Rectifier message

Clôturer sujet

Remonter

Haut

Site non déclaré à la CNIL dans le cadre de la dispense n°6
Vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données qui vous concernent via votre profil.

Document généré en 0.03 seconde