Slideshow op website implementeren lukt niet - Softwareontwikkeling

zaterdag 11 juli 2009 11:05

Acties:

0 Henk 'm!

Topicstarter

Hé Tweakers,

Ik ben bezig met een website en daarop komen een aantal foto's te staan. Nu leek het mij mooi als ik een gallery had waarin de foto's als een soort van slideshow te zien zijn.

Ik heb op http://devkick.com/lab/galleria/ een mooie gallery gevonden, alleen het implementeren ervan gaat wat moeizaam. Er zit een vijf stappen schema bij maar helaas lukt het mij niet om de gallery werkend te krijgen.

Stap 1 en 2: 'Download jQuery', 'Galleria plugin' en 'galleria.css'.

Stap 3: Voeg het volgende toe aan je <head>:

code:

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>

Zo ziet mijn index.html eruit:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
</head>

<body>
</body>
</html>

Stap 1 t/m 3 geen probleem. Bij stap 4 moet ik een "ongeordende lijst van plaatjes creëren met als 'identifier': class='gallery'. Ik heb een nieuw html bestand aangemaakt en die code ziet er als volgt uit:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<ul class="gallery"> <li><img src="1.JPG" title="A caption" alt="Image01"></li> 
</ul>
<ul class="gallery"> <li><img src="2.JPG" title="A caption" alt="Image01"></li> 
</ul>
</body>
</html>

Volgens mij moet ik ergens de html pagina met de ongeordende foto's toewijzen aan de index.html maar ik weet niet waar. Wellicht is het iets anders, dat weet ik namelijk niet.

Kan iemand mij helpen om dit euvel op te lossen?

zaterdag 11 juli 2009 11:16

Acties:

0 Henk 'm!

Verwijderd

Dit gedeelte

code:

<ul class="gallery"> <li><img src="1.JPG" title="A caption" alt="Image01"></li> 
</ul>
<ul class="gallery"> <li><img src="2.JPG" title="A caption" alt="Image01"></li> 
</ul>

toevoegen binnen de <body> tags van het eerste stukje.

zaterdag 11 juli 2009 11:30

Acties:

0 Henk 'm!

Verwijderd

Een paar kleine puntjes.

Allereerst omdat je in XHTML werkt:

code:

1	<img src="1.JPG" title="A caption" alt="Image01">

Moet dan natuurlijk

code:

1	<img src="1.JPG" title="A caption" alt="Image01" />

worden.

Daarnaast, maak gewoon 1 unsorted list met de plaatjes:

code:

<ul class="gallery"> 
<li><img src="1.JPG" title="A caption" alt="Image01" /></li>
<li><img src="2.JPG" title="A caption" alt="Image02" /></li>
</ul>

En tenslotte als je jquery hebt gedownload, zorg ervoor dat je het hernoemd naar jquery.js, anders gaat het ook nooit werken

[ Voor 31% gewijzigd door Verwijderd op 11-07-2009 11:33 . Reden: wat toevoegingen ]

zaterdag 11 juli 2009 11:33

Acties:

0 Henk 'm!

vleppyniles

Topicstarter

@ Silk_dude: Bedankt voor de snelle reactie! Ik heb je tip opgevolgd maar dan krijg ik niet de gallery te zien maar alleen de twee foto's in full size.

[ Voor 5% gewijzigd door vleppyniles op 11-07-2009 11:33 ]

zaterdag 11 juli 2009 11:34

Acties:

0 Henk 'm!

Verwijderd

Ik heb nog wat dingen toegevoegd aan m'n vorige post, zo zou het moeten werken

zaterdag 11 juli 2009 11:39

Acties:

0 Henk 'm!

vleppyniles

Topicstarter

@ m00se: Oke bedankt. Ik ga ermee aan de slag en dan laat ik het weten!

zaterdag 11 juli 2009 11:48

Acties:

0 Henk 'm!

vleppyniles

Topicstarter

@ m00se: Ik heb je tip opgevolgd en jquery-1.3.2 hernoemt naar jquery.js. Ook heb ik de html code aangepast:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
</head>

<body>
<ul class="gallery"> 
<li><img src="1.JPG" title="Foto 1" alt="Image01"/></li> 
<li><img src="2.JPG" title="Foto 2" alt="Image01"/></li> 
</ul>
</body>
</html>

Als ik nu deze html pagina opsla onder test.html en ik open hem in explorer dan zie ik weer de twee foto's in grootformaat.

zaterdag 11 juli 2009 12:43

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Misschien moet je je plugin ook nog even aanroepen?

Staat trouwens gewoon bij usage op die site:

JavaScript:

1	jQuery(function($) { $('ul.gallery').galleria(); });

zaterdag 11 juli 2009 12:59

Acties:

0 Henk 'm!

vleppyniles

Topicstarter

Volgens mij wordt plugin aangeroepen. Staat in m'n head. Of moet ik daar nog iets speciaals mee doen?

zaterdag 11 juli 2009 13:08

Acties:

0 Henk 'm!

Verwijderd

@Bosmonster
volgens mij staat dat gewoon in z' n header hoor, je moet alleen even wat opzij scrollen

@vleppyniles
Okay, ik heb het hier even getest en het schijnt gewoon te werken, dus probeer even te kopieren wat ik doe.

Zorg dat je de volgende bestanden in dezelfde directory plaatst (bijvoorbeeld je desktop of zo):

galleria.css
index.html (of hoe je jouw pagina ook wilt noemen)
jquery.js
jquery.galleria.js
jouw plaatjes

Inhoud van mijn index.html

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.galleria.js"></script> 
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
</head>

<body>
<ul class="gallery"> 
<li><img src="http://interfacelift.com/wallpaper_beta/Dde52180/01959_sendmeasign_1280x720.jpg" title="Give Me A Sign" alt="Image01" /></li>
<li><img src="http://interfacelift.com/wallpaper_beta/D106e36a/01958_hexillus_1280x800.jpg" title="Hexillus" alt="Image02" /></li>
</ul>
</body>

</html>

zaterdag 11 juli 2009 13:17

Acties:

0 Henk 'm!

vleppyniles

Topicstarter

Fantastisch m00se, het werkt! Thanks. Iedereen bedankt voor het meedenken.

Pagina: 1

Reageer