Een slideshow in Joomla maken met Simple Image Gallery
Als je gebruik maakt van Joomla en daarin een slideshow wilt maken, dan zijn er heel wat opties. Zelf gebruik ik onder andere Simple Image Gallery van Fotis Evangelou en George Chouliaras (gebaseerd op Lightbox). Hoe dat in z'n werk gaat wil ik je in dit artikel toelichten.
Simple Image Gallery installeren
Simple Image Gallery is een mambot. Dat wil zeggen dat de functionaliteit ervan gekoppeld is aan een code die je in een bericht zet. Bij het weergeven van de pagina wordt deze code vertaald naar iets extra's, in dit geval een Image Gallery.
1) Download de mambot van de site van JoomlaWorks.
2) Installeer de mambot in Joomla.
a) Ga hiervoor naar Installers > Mambots.
b) Upload het zipbestand dat je zojuist hebt gedownload.
c) Je krijgt nu een bevestiging dat het geslaagd is.
3) Activeer je mambot
a) Ga naar Mambots > Site mambots
b) Klik in de kolom Published op het icoontje achter Simple Image Gallery
c) De pagina ververst zich en je kunt nu van start.
Simple Image Gallery instellingen maken
Nu kun je de basisinstellingen bekijken en eventueel aanpassen.
1) Ga naar Mambots > Site mambots
2) Klik op Simple Image Gallery
3) Laat het linkerdeel van het scherm ongemoeid. Het gaat nu met name om de instellingen aan de rechterkant die bepalen hoe SIG je afbeeldingen verkleint en ze laat zien in de pagina [klik op de afbeelding voor een uitvergroting]:
a) Image thumbnail width en Image thumbnail height bepalen hoe groot je thumbnails maximaal worden.
b) Image thumbnail quality bepaalt de kwaliteit van de verkleining. Hoe hoger des te beter. 80 is een mooie waarde
c) Should we display a navigation tip for the slideshow? Als je wilt dat je bezoekers een hint zien als ze met hun muis over een thumbnail gaan, dan kan je dit hier aangeven.
d) De hint zelf kun je invullen bij Popup window navigation tip message
e) Should we display a nice message? Vul hier Ja in als je niet wilt dat de naam van de afbeelding getoond wordt (wat meestal niet zo mooi is), maar de naam van het bericht waar je je slideshow in publiceert
f) Bij Popup window message kun je invullen wat er moet staan onder de uitvergroting.
Een slideshow publiceren
Om een slideshow aan te maken en te publiceren doe je het volgende:
1) Upload je originele foto's naar een nieuwe map op je server in de folder images/stories/.
NB Gebruik kleine letters en gebruik een _ in plaats van een spatie. Dus bijv. de_kamers_van_ons_hotel. TIP Gebruik maximaal 20 foto's.
2) Maak een nieuw artikel aan en plaats daarin de volgende code {gallery}de_kamers_van_ons_hotel{/gallery}.
3) Bewaar het bericht
4) Bekijk het op je site of in preview. Als je de pagina voor de eerste keer bekijkt maakt SIG alle nodige thumbnails aan; daarna worden deze voortaan gebruikt. Zie hier het resultaat [klik op de afbeelding voor een uitvergroting]:
Conclusie
Een mooie Lightbox toevoeging voor je Joomla site. Makkelijk te installeren en makkelijk te maken. De mogelijkheden om teksten in te stellen zijn wat te beperkt. De hint die je namelijk invult (zie boven) verschijnt zowel op je gewone pagina als in je uitvergroting, terwijl dit toch 2 verschillende functionaliteiten zouden moeten zijn.
Meer lezen
- Zie voor een werkend voorbeeld de demosite van JoomlaWorks
Ervaringstips van lezers
- Gebruik .jpg als extensie van foto's in plaats van .jpeg, anders wordt een gallery niet herkend – Peter Verhoef
Leontine
24.09.07 - 16:48
Beste Theo,
Waarschijnlijk ligt het probleem bij mij, maar ik snap weinig van het hele verhaal, terwijl het toch zo "simple" moet zijn. Ik heb alles gedaan volgens de informatie wat betreft installeren. Echter, in je uitleg geef je aan, maak een nieuw artikel aan en plaats daarin de code….Waar maak ik dit artikel aan? Ik heb nogal een complexe opbouw van mijn site en heb geen idee waar ik dit "artikel"aan moet maken. Ik neem aan dat het over een "item" gaat. Waar maak ik dit aan? Ik probeer een digitaal portfolio te maken. Hopelijk kan je me verder helpen…
gr Leontine
Sander
10.10.07 - 12:07
Ik vind het een gave tool. Maar ik zou graag zoiets willen als bij deze link met thumbnails en dan in de gallery komen kan het met het zelfde product gemaakt worden of is dit een ander product.
Kijk portfolio bovenin met thumbs:
Sander
10.10.07 - 12:07
http://www.weide-webdesign.nl/ dit is de link die niet werkt met de xhtml !!!!
Martin
27.03.08 - 0:17
Hallo,
Ik sluit mij aan bij Leontine,
… in je uitleg geef je aan, maak een nieuw artikel aan en plaats daarin de code….Waar maak ik dit artikel aan?…
Groet,
Martin
Theo Bakker
27.03.08 - 9:08
Dag Martin,
dit kan gewoon via de backend van Joomla. Log in en klik op de knop Add New Content.
Groet, Theo
Martin
28.03.08 - 15:45
Hallo Theo,
Ik gebruik Joomla 1.5 Nederlandse versie. Ik dien dus eerst systeem – legacy plugin te activeren.
Onder images/stories heb ik ook een map gemaakt met: de_kamers_van_hotel. Daarna maak ik een nieuw artikel aan in het tekstveld van de Joomla editor -TinyMCE- en kopieer ik de tekst:{gallery}de_kamers_van_ons_hotel{/gallery} en klik op toepassen en daarna op voorbeeld. Het scherm word zwart behalve het middenvlak en daarin vershijnt enkel de tekst:
fotoslide (titel van het artikel)
{gallery}de_kamers_van_ons_hotel{/gallery}
Heeft u enig idee?
Groetjes,
Martin
Peter - nummerelf
16.05.08 - 14:56
Hoi
Klopt het dat dit niet werkt in joomla 1.5?
Peter
Theo Bakker
18.05.08 - 23:01
Dag Peter,
Dit heb ik nog niet getest. Kijk anders even op de website van de ontwikkelaars: http://www.joomlaworks.gr/#downloads_section.
Vriendelijke groet, Theo
Erik
29.08.08 - 22:11
Dag iedereen,
Ik heb de Simple Image Gallery geïnstalleerd, maar als ik de foto's aanklik, dan verschijnen ze niet op de zwarte achtergrond met mogelijkheid om door te klikken.
Ik heb de beschrijving van het probleem gevonden bij de maker van de plug-in zelf, maar die reikt geen oplossing aan. Er wordt gezegd: 3. The "lightbox-styled" popup does not show up with the black "mask", as it does in the JoomlaWorks demo site. The answer is simple: it's your template's fault. Revert to the default template of Joomla! to make sure.
Daar ben ik dus niet veel mee.
Ik ben dan gaan zoeken en op de volgende site vind ik een aantal voorstellen om de index.php te veranderen: http://www.joomlaportal.de/geloeste-themen-joomla-mambots/103675-simple-image-gallery-plugin-troubleshooting.html
Echter: het werkt nog steeds niet.
Kan iemand van jullie me helpen? Het ligt duidelijk aan de code van de template.
Erik
Theo Bakker
30.08.08 - 8:41
Dag Erik,
Wat is je website precies en welk template gebruik je?
Groet, Theo
Tom
24.11.08 - 21:42
Hallo Theo,
Ik had toc heen ander beeld bij een slideshow. Namelijk 1 foto'tje die telkens veranderd in een andere. Heb je hier toevallig ook iets voor?
Alvast bedankt.
Theo Bakker
28.11.08 - 9:34
Dag Tom,
Zoek in dat geval eens in Google op 'image rotator' of kijk naar het product SlideShowPro. Dat gebruik ik zelf. Kijk voor een voorbeeld op http://www.plankenkoor.nl.
Groet, Theo
Teus
09.07.09 - 11:30
Hallo Allemaal,
Deze plugin werkt bij mij bijna perfect. Het enige wat nog niet naar behoren werkt zijn de thumbnails. Deze worden weergegevens als een rood kruisje.
Lemper
19.08.09 - 21:51
Hallo,
Top plugin! Maar kan iemand mij helpen. Ik zou graag de staande Thumbs liggend maken. Zodat ze beter op elkaar aansluiten. Dus ik zou graag de thumb zelf willen aanpassen. Is dit mogelijk of moet ik opzoek naar een andere oplossing?
Gr
ottens
05.03.10 - 10:06
Thumbs liggend maken…. dan moet je de .js code aanpassen of css,
ik heb zelf het probleem dat de thump opend in twee pop-up vensters tegelijk over elkaar heen?????
ik maak gebruik van Joomla! 1.5 Nederlandse versie
iemand enig idee
Gr
ottens
05.03.10 - 10:21
Ha ben ik weer heb mijn probleem opgelost, het kwam omdat er ook nog een module op de pagina stond die ook een pop-up gebruikte maar in een andere style… zullen wel de zelfde naam hebben? denk ik… :-(
dat wordt dan wel lastig als je verschillende slideshows op een pagina wil laten zien? mmmm
gr