fancybox hulp

**Ladyke** · 21 juni 2012, 20:39

hoi,

ik heb geprobeerd om een fancybox (javascript) te installeren ,
dit lukt niet want ik snap de gids op de site zelf niet zo goed.
kan iemand me hierbij helpen ?

Alvast bedankt

Ladyke

**Robin S** · 21 juni 2012, 20:54

Hoihoi

http://fancybox.net/howto
Dat is de gids waarnaar je verwijst, niet? Bij welke stap raak je de draad kwijt?

Gr. Robin

**Ladyke** · 22 juni 2012, 09:01

eigg al vanaf 2

nu ik ben er al even mee bezig met de codes enzo maar nog niet alles is even duidelijk

ik weet wel wat ermee te doen maar ik snap gewoon niet waar ze te plaatsen .
want als ik ze plaats zoals ik den dan krijg ik helemaal niets of een deel van de website krijgt een error.

grtz ladyke

**Robin S** · 22 juni 2012, 13:43

Okidoki, dan beginnen we bij 2

<script>-elementen zet je in principe altijd in de header van je
document. Dat zal er na het uitvoeren van stappen 1 en 2 dus ongeveer zo uit zien:

index.htm

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
        <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
        <title></title>
    </head>
    <body>
        ...
    </body>
</html>

Regel 1 is hier een DocType, wat in stap 1 genoemd werd

Aan de src-attributen van de <script>-elementen zie je dat de eerste zich op het web bevindt, en dat de anderen in een folder genaamd fancybox (moeten komen te) staan. De structuur van de pagina zal dus hierop lijken:

Code:

root/
  index.htm
  fancybox/
    jquery.fancybox-1.3.4.pack.js
    jquery.easing-1.4.pack.js
    jquery.mousewheel-3.0.4.pack.js

De bestanden die je nodig hebt, zitten in het pakketje dat je gedownload hebt (http://fancybox.googlecode.com/files...ybox-1.3.4.zip)

Ik hoor 't wel als je naar de volgende stap wil, of juist als je iets in mijn post nog niet snapt

Gr. Robin

**Ladyke** · 23 juni 2012, 22:40

oke ik heb alles ingevuld , het ziet er nu zo uit:

HTML Code:

1
2
3
4
5
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="www.plussersherentals.be/documenten/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="www.plussersherentals.be/documenten/fancybox/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="www.plussersherentals.be/documenten/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

ik heb de bestanden gedownload en geupload naar mijn server (host)

en zoals hierboven heb ik de links aangepast.

dus ik denk dat je me met stapje 2 kan helpen

Grtz Ladyke

**Robin S** · 24 juni 2012, 12:03

Super

Dit is stap 3:

HTML Code:

1
<link rel="stylesheet" href="www.plussersherentals.be/documenten/fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Die mag je ook in de header (<head>) van je document zetten (bijvoorbeeld onder de <script>-elementen)

In stap 4 moet je beslissen wat je in zo'n fancybox wil laten zien (heb je waarschijnlijk al gedaan toen je besloot fancybox te gebruiken

). Dat kan zijn:
- Een plaatje (Image, met <img/>)
- Een stukje tekst/andere data (inline content)
- Een hele pagina (Iframe, met <iframe>)
- Andere data (AJAX)

Op welke pagina wil je fancybox trouwens gebruiken? Op http://plussersherentals.be/documenten/fancybox/ zie je trouwens vast de demo die in het fancybox-pakketje zat. Misschien helpt de broncode daarvan ook wel wat als voorbeeld

Gr. Robin

**Ladyke** · 24 juni 2012, 16:58

oke done

euhm ik wil eigenlijk op de foto pagina van de site plaatsen : www.plussersherentals.be/foto's.htm
dus ik wil de voorkant zoals nu behouden maar als ik er op klik dan moet de fancybox opkomen met de pijtjes keuze aan de kant. dus voorbeeld 3 denk ik (de slideshow eigg)

Grtjes ladyke

**Robin S** · 26 juni 2012, 14:56

Hoi

De links op je website zien er op dit moment zo uit (dit zijn de twee eersten: bowling en voettocht):

HTML Code:

1
2
3
4
5
6
<a target="_blank" href="https://skydrive.live.com/redir?resid=94C9A3EE647D32C2!912&amp;authkey=!AMKpaOrWD0KPXo4">
    <img alt="Bowlen 11 mei" src="http://plussersherentals.be/fotos/bowling 11 mei.png" style="border: 0;">
</a>
<a target="_blank" href="https://skydrive.live.com/redir?resid=94C9A3EE647D32C2!906&amp;authkey=!ALUxFYqmTgUrJaM">
    <img alt="Voettocht 2012" src="http://plussersherentals.be/fotos/voettocht 2012.png" style="border: 0;">
</a>

De <img/>-elementen kun je zo houden. De links (<a>) moeten we wat aanpassen. Uiteindelijk gaat het deze vorm krijgen:

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="fotos/bowling/1.jpg" rel="bowling">
    <img alt="Bowlen 11 mei" src="http://plussersherentals.be/fotos/bowling 11 mei.png" style="border: 0;">
</a>
<a href="fotos/voettocht/1.jpg" rel="voettocht">
    <img alt="Voettocht 2012" src="http://plussersherentals.be/fotos/voettocht 2012.png" style="border: 0;">
</a>
<div class="display:none;">
    <a href="fotos/bowling/2.jpg" rel="bowling"></a>
    <a href="fotos/bowling/3.jpg" rel="bowling"></a>
    <a href="fotos/bowling/etc.jpg" rel="bowling"></a>
 
    <a href="fotos/voettocht/2.jpg" rel="voettocht"></a>
    <a href="fotos/voettocht/3.jpg" rel="voettocht"></a>
    <a href="fotos/voettocht/etc.jpg" rel="voettocht"></a>
</div>

Zoals je ziet heeft ieder <a>-element een rel-attributt die aangeeft bij welke galerij het element hoort, en een href-attribuut die naar een foto in die galerij verwijst. Ik heb steeds een lokaal pad gebruikt, maar je kan er ook voor kiezen om voor ieder plaatje in de galerij de skydrive-link te gebruiken. Da's alleen waarschijnlijk wat meer werk

Het eerste <a>-element van elke galerij staat buiten de <div> en bevat een <img/>-element. Dat <img/>-element is het plaatje waar je op klikt om de galerij te openen.

Ik denk dat dit de grootste stap is; mocht er iets onduidelijk zijn hoor ik het wel

Robin

**csshunter** · 26 juni 2012, 16:15

@ Robin S:

Ik heb steeds een lokaal pad gebruikt, maar je kan er ook voor kiezen om voor ieder plaatje in de galerij de skydrive-link te gebruiken. Da's alleen waarschijnlijk wat meer werk.

Ja, met skydrive moet je steeds van elke foto apart die vreselijke URL opzoeken op skydrive en in de code plakken.
Alleen al voor de bowling-serie zijn het er zo'n 40, bij elkaar zullen het er honderden zijn.

Maar als je een lokaal pad opgeeft (voor de server), dan moeten alle foto's wel naar de server geüpload worden. Dat is ook een karweitje, en je bent je gratis webspace voor de foto-bestanden bij skydrive kwijt. Als ik het zo zie, is elke foto rond de 500kB. Dan gaat het hard. Bij gemiddeld 25 per serie en nu al 11 series zit je dan al tegen de 150MB.
Dan ben je zo over een goedkoop hostingpakket (250MB) heen.

Mogelijke oplossing: het formaat en de bestandsgrootte van de foto's terugbrengen (ze zijn nu 2.048*1.536px, voor webgebruik zal 700*500 wel genoeg zijn). Maar ook dat is een karweitje; met verder als nadeel: de foto's hebben dan geen printkwaliteit meer, dus bezoekers kunnen ze niet even mooi uitprinten).

Het zal dus wikken en wegen worden, vrees ik.

Terzijde: in afwijking van de skydrive-methode is er nu per serie geen overzicht meer van alle foto's. Wil je dat wel, dan zou er per serie een tussenpagina met thumbnails van die serie moeten komen (bv. in de geest van deze).

Met vriendelijke groet,
CSShunter

**Ladyke** · 6 juli 2012, 17:15

hoi,
ik heb alles aangepast maar krijg geen fancybox :-(
kan je zoiets mat tumbnails laten popuppen nadat je op vb fotos bowlingen klikt ?

alvast bedankt

**Robin S** · 6 juli 2012, 22:46

Jep

Dat is de vijfde en laatste stap - het koppelen van je HTML aan het fancybox-script.

Belangrijk is dat je HTML geladen is wanneer je dat doet. Daarvoor gebruik je $(document).ready:

Javascript Code:

1
2
3
4
5
$(document).ready(function() {
 
    /* Koppelen gebeurt hier */
 
});

Je HTML heeft nu als 't goed is deze structuur (zie m'n vorige post):

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="fotos/bowling/1.jpg" rel="bowling">
    <img alt="Bowlen 11 mei" src="http://plussersherentals.be/fotos/bowling 11 mei.png" style="border: 0;">
</a>
<a href="fotos/voettocht/1.jpg" rel="voettocht">
    <img alt="Voettocht 2012" src="http://plussersherentals.be/fotos/voettocht 2012.png" style="border: 0;">
</a>
<div class="display:none;">
    <a href="fotos/bowling/2.jpg" rel="bowling"></a>
    <a href="fotos/bowling/3.jpg" rel="bowling"></a>
    <a href="fotos/bowling/etc.jpg" rel="bowling"></a>
 
    <a href="fotos/voettocht/2.jpg" rel="voettocht"></a>
    <a href="fotos/voettocht/3.jpg" rel="voettocht"></a>
    <a href="fotos/voettocht/etc.jpg" rel="voettocht"></a>
</div>

Je kunt nu simpelweg de verschillende galleries vatten d.m.v. het rel-attribuut:

Javascript Code:

1
2
3
4
5
6
7
$(document).ready(function() {
 
    $("a[rel=\"bowling\"]").fancybox();
    $("a[rel=\"voettocht\"]").fancybox();
    //etc.
 
});

Deze JavaScript-code mag je in een <script>-element zetten, dat weer in de header (<head>) komt:

HTML Code:

1
2
3
4
5
6
7
<head>
    ...
    <script type="text/javascript">
        //Bovenstaande JavaScript-code
    </script>
    ...
</head>

Edit:
Ik had even over het met thumbnails openen heen gelezen

Dat zit geloof ik niet standaard in het fancybox-script, maar ik zal binnenkort (van de week) eens voor je kijken of dat gemakkelijk aan te passen is

Gr. Robin

**Ladyke** · 20 juli 2012, 14:29

het is niet gelukt, als ik alles aanpas zoals jij zegt dan kan ik op de bowlingen foto klikken , daarna word ik door verwezn naar een nieuwe pagina met een foto in de linkse boven hoek

**Ladyke** · 30 augustus 2012, 16:40

hoi jongens,

sorry voor de late reactie maar heb het een hele tijd druk gehad

dit is wat ik voorlopig aan de praat heb gekregen:

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html>
<head>
    <title>Foto's - Plussers Herentals</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text' rel='stylesheet' type='text/css'>
 
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox/lib/jquery-1.8.0.min.js"></script>
 
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox//lib/jquery.mousewheel-3.0.6.pack.js"></script>
 
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox/source/jquery.fancybox.js?v=2.1.0"></script>
    <link rel="stylesheet" type="text/css" href="http://www.plussersherentals.be/fancybox/source/jquery.fancybox.css?v=2.1.0" media="screen" />
 
    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="http://www.plussersherentals.be/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
 
    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="http://www.plussersherentals.be/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
 
    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="http://www.plussersherentals.be/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
  <!-- Bijkomende opmaak -->
    <style type="text/css">
<!--
img.homelijn{
height:25%;
max-height:25%;
width:101.4%;
margin-left:-1%;
margin-top:-1%;
}
p.fotostitle{
font-family: 'Leckerli One', cursive;
font-size:50px;
text-align:center;
}
div.menu{
margin-top:-1em;
margin-left:17.8%;
height: 110px;
}
 
ul#main-nav {margin:0;padding:0;position: absolute;}
ul#main-nav li {margin:0 3px;padding:0;list-style:none;float:left; text-align: center;}
ul#main-nav li a {text-decoration:none;display:block;padding:0.6em 0;color:#FFFFFF;background:#009900;width:99px}
ul#main-nav li a:hover, ul#main-nav li a:focus {color: red; background:#FFFF00;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;margin: 0;}
 
-->
</style>
 
    <script type="text/javascript">
        $(document).ready(function() {
            /*
             *  Simple image gallery. Uses default settings
             */
 
            $('.fancybox').fancybox();
     
            /*
             *  Different effects
             */
 
            // Change title type, overlay closing speed
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedOut : 0
                    }
                }
            });
 
            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
 
                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });
 
            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,
 
                openEffect : 'none',
 
                helpers : {
                    title : {
                        type : 'inside'
                    },
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
            });
 
            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,
 
                openEffect : 'elastic',
                openSpeed  : 150,
 
                closeEffect : 'elastic',
                closeSpeed  : 150,
 
                closeClick : true,
 
                helpers : {
                    overlay : null
                }
            });
 
            /*
             *  Button helper. Disable animations, hide close button, change title type and content
             */
 
            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
 
                prevEffect : 'none',
                nextEffect : 'none',
 
                closeBtn  : false,
 
                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },
 
                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });
 
 
            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */
 
            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',
 
                closeBtn  : false,
                arrows    : false,
                nextClick : true,
 
                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });
 
            /*
             *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */
            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',
 
                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });
 
            /*
             *  Open manually
             */
 
            $("#fancybox-manual-a").click(function() {
                $.fancybox.open('http://www.plussersherentals.be/fancybox/demo/1_b.jpg');
            });
 
            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5
                });
            });
 
            $("#fancybox-manual-c").click(function() {
                $.fancybox.open([
                    {
                        href : 'http://www.plussersherentals.be/fancybox/demo/1_b.jpg',
                        title : 'My title'
                    }, {
                        href : 'http://www.plussersherentals.be/fancybox/demo/2_b.jpg',
                        title : '2nd title'
                    }, {
                        href : 'http://www.plussersherentals.be/fancybox/demo/3_b.jpg'
                    }
                ], {
                    helpers : {
                        thumbs : {
                            width: 75,
                            height: 50
                        }
                    }
                });
            });
 
 
        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>
</head>
<body>
<img class="homelijn" src="http://plussersherentals.be/fotos/Lijn site.jpg" alt="Lijn">
<div class="menu">
    <ul id="main-nav">
        <li><a href="http://plussersherentals.be/index.htm">Home</a></li>
        <li><a href="http://plussersherentals.be/foto's.htm">Foto's</a></li>
        <li><a href="#">Activiteiten</a>
            <ul>
                <li><a href="http://plussersherentals.be/uitnodigingen.htm">Uitnodigingen</a></li>
                <li><a href="http://plussersherentals.be/verslagen.htm">Verslagen</a></li>
            </ul>
        </li>
        <li><a href="http://plussersherentals.be/plusserlied.htm">Plusserlied</a></li>
        <li><a href="http://plussersherentals.be/leiding.htm">Leiding</a></li>
        <li><a href="http://plussersherentals.be/plan.htm">Plan</a></li>
        <li><a href="http://plussersherentals.be/links.htm">Links</a></li>
        <li><a href="http://plussersherentals.be/faqs.htm">FAQ's</a></li>
        <li><a href="http://plussersherentals.be/contact.htm">Contact</a></li>
    </ul>
</div>
</div>
<p class="fotostitle">Foto's :</p>
    <p>
        <a class="fancybox" href="http://www.plussersherentals.be/fotos/bowling 11 mei.png" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="http://www.plussersherentals.be/fotos/bowling 11 mei.png" alt="" /></a>
 
        <a class="fancybox" href="http://www.plussersherentals.be/fancybox/demo/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"></a>
 
        <a class="fancybox" href="http://www.plussersherentals.be/fancybox/demo/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"></a>
 
        <a class="fancybox" href="http://www.plussersherentals.be/fancybox/demo/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"></a>
    </p>
    
 
 
</body>
</html>

is wel lang maar dat is de hele code .
nu dit is voor 1 slideshow maar ik wil er natuurlijk meerdere van deze, hoe moet ik de code aanpassen zodat ik meer van deze soort slideshows kan maken en ze automatisch naast elkaar komen te staan.dus de meest actuele in de linkse boven hoek en de minder actuele rechts ernaast aftellend.

mvg ladyke en bedankt voor jullie geduld en hulp

**Ladyke** · 31 augustus 2012, 13:57

heb het gevonden

ik moet bij de code in de body achteraan gallery veranderen in gallery 01 , 01 , 03 enz
dan werkt het wel voor meerder en naast elkaar .

thanks en mvg Ladyke

Onderwerp: fancybox hulp

Onderwerp opties

Zoek in onderwerp

Vraag is opgelost

fancybox hulp

iets aan de praat gekregen

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact