fancybox hulp

Ladyke · 21 jun 2012

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 jun 2012

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 jun 2012

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 jun 2012

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:

<!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/jquery.fancybox-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 jun 2012

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

HTML:

<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 jun 2012

Super

Dit is stap 3:

HTML:

<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 jun 2012

oke done :thumb:

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 jun 2012

Hoi

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

HTML:

<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:

<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 jun 2012

@ 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 jul 2012

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 jul 2012

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:
[JS]$(document).ready(function() {

/* Koppelen gebeurt hier */

});[/JS]

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

HTML:

<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:

[JS]$(document).ready(function() {

$("a[rel=\"bowling\"]").fancybox();
$("a[rel=\"voettocht\"]").fancybox();
//etc.

});[/JS]
Deze JavaScript-code mag je in een <script>-element zetten, dat weer in de header (<head>) komt:

HTML:

<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 jul 2012

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 aug 2012

iets aan de praat gekregen

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:

<!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 aug 2012

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

fancybox hulp

Ladyke

Gebruiker

Robin S

Gebruiker

Ladyke

Gebruiker

Robin S

Gebruiker

Ladyke

Gebruiker

Robin S

Gebruiker

Ladyke

Gebruiker

Robin S

Gebruiker

csshunter

Meubilair

Ladyke

Gebruiker

Robin S

Gebruiker

Ladyke

Gebruiker

Ladyke

Gebruiker

Ladyke

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy