Album module met .js effecten

Met de "Album module" is het mogelijk om op een eenvoudige wijze een fotoalbum aan je CMS Made Simple installatie toe te voegen. De standaard installatie geeft de mogelijkheid om verschillende templates te gebruiken.

Een aantal van deze templates zijn gekoppeld aan JavaScript libraries die gebruikt kunnen worden voor speciale effecten. Standaard aanwezige libraries zijn Greybox en Lightbox dit artikel gaat in op alternatieve mogelijkheden.

In deze blog wordt stap voor stap uitgelegd hoe de "Album module" geinstalleerd kan worden, er een 3th party JavaScript library aan CMSMS toegevoegd kan worden. Eveneens wordt uitgelegd hoe een eigen template aangemaakt kan worden en hoe deze aan een JavaScript library gekoppeld kan worden.

In onderstaande uitleg nemen we de "Floatbox JavaScript library" als voorbeeld ben je van plan om een andere library te gebruiken dan zal de implementatie iets verschillen.

Installeren van de "Album module" aanmaken van "nieuw album"

• Installer de "Album" module hier te downloaden
• Maak een "nieuw album" aan en voeg een aantal foto's toe
• Voeg module toe aan nieuwe of bestaande pagina via

Installeren van "Floatbox effecten library"

De "Album module" heeft standaard al een aantal effecten libraries (waaronder greybox, lightbox, lytebox) deze zin te vinden onder: mijn_webroot/modules/Album/templates/db

Via deze link haal ik een .zip file op uitgepakt komt deze in: mijn_webroot/modules/Album/templates/db/floatbox

! Het is natuurlijk ook mogelijk om een "floatbox" mapje aan te maken in: mijn_webroot/uploads of op een andere plek los van de "Album module"

Aanmaken van "floatbox template"

• Ga naar content -> photo albums -> templates
• Voeg een nieuwe template toe, met de inhoud van de "default" template noem deze: "floatbox template"

Koppel "Floatbox effecten library" aan "floatbox template"

• content -> photo albums -> templates -> "floatbox template" -> edit

Verwijder aan de bovenkant van de template alle verwijzingen naar .css en .js files en vervang deze door:

<!-- floatbox stuff -->
<link type="text/css" rel="stylesheet" href="modules/Album/templates/db/floatbox/floatbox.css" />
<script type="text/javascript" src="modules/Album/templates/db/floatbox/floatbox.js"></script>

Onder vervang class="thickbox" met class = "floatbox".

Maak "floatbox template" default en koppel deze aan "nieuw album"

• content -> photo albums -> templates -> album list template -> "floatbox template" -> save
• content -> photo albums -> options -> default template -> "floatbox template" -> save
• content -> photo albums -> albums -> "nieuw album" -> properties -> template -> "floatbox template" -> save

Verder tweaken

De vormgeving van de floatbox vensters kunnen via een CSS bestand gewijzigd worden. Dit bestand is te vinden onder: mijn_webroot/modules/Album/templates/db/floatbox/floatbox.css

De stylesheet wordt via class="floatbox" gekoppeld aan de "floatbox template".

Het gedrag van de floatbox kan in de vorm van "rev=optie1:waarde1 optie2:waarde2" bepaald worden. Alle opties zijn terug te vinden in de floatbox documentatie.

Slideshow voorbeeld: (! let op group:images)

<a href="" class="floatbox" rev="doSlideshow:true group:images showThis:false endTask:exit autoFitImages:true navType:none">Slideshow voorbeeld</a>

Voorbeeld met << Achteruit || Vooruit >> navigatie

<li class="thumb">
    <a href="{$onepicture->picture}" rel="{$album->name|escape:'html'}" class="floatbox" rev="numIndexLinks:10  showIndexThumbs:true indexLinksPanel:control group:images" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
</li>

Mootools - Slideshow 2

De bovengenoemde JavaScript libraries werken allen vanuit een Box die over de volle breedte van je scherm klapt. Handig als je brede foto's wilt laten zien en niet zo veel ruimte hebt binnen je webpagina. In Slideshow 2 gebasseerd op Mootools.js verschijnen de foto's binnen een kolom van je pagina en is er een slider aanwezig waarin je thumbnails staan.

Mootools - Slideshow 2 in CMSMS Album module

Om "Slideshow2" aan je Album module toe te voegen kan je de "FloatBox" beschrijving hierboven grotendeels volgen. Het bewerken van de "default" template gaat als volgt:

Koppel "Mootools - Slideshow 2 library" aan "slideshow_mootools template"

• content -> photo albums -> templates -> "slideshow_mootools template" -> edit

Verijder aan de bovenkant van de template alle verwijzingen naar .css en .js files en vervang deze door:

<!-- slideshow_mootools stuff -->
<link type="text/css" rel="stylesheet" href="modules/Album/templates/db/slideshow_mootools/css/slideshow.css" />
<script type="text/javascript" src="modules/Album/templates/db/slideshow_mootools/js/mootools.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/slideshow_mootools/js/slideshow.js"></script>

Onder {* Photo List *} verwijder alles tot {if $picturecount==0}No image{/if} en vervang dit met:

{* start slideshow_mootools *}

<h2>{$album->name}</h2>

{$album->comment} <br />

<div style="background-color: #FF0000;">
    <div id="show"></div>
    <div class="clear"></div> <!-- clears the floating div's inside div#show -->
        
[literal]   
		<script type="text/javascript">
			//<![CDATA[
			window.addEvent('domready', function() {
				var data = {
[/literal]  

{foreach from=$pictures item=picturesrow name=pictures_loop}
    {foreach from=$picturesrow item=onepicture name=picturesrow_loop}
'{$onepicture->name}': [literal]{[/literal]caption: '{$onepicture->name|escape:'html'}' {if $smarty.foreach.pictures_loop.last && $smarty.foreach.picturesrow_loop.last}
[literal]}[/literal]
{else}[literal]},[/literal]
{/if}
    {/foreach}
{/foreach}

[literal]						
				};
				var myShow = new Slideshow('show', data, {delay: 4000, controller: false, overlap: false, width: 640, height: 480, hu: '/uploads/images/album/', thumbnails: true, resize: false});
			});
			//]]>
		</script>        
[/literal]       

</div>
{* end slideshow_mootools *}

Schrijf de template weg door op [submit] te klikken:

Aanpassen van slideshow.js

De imageupload module maakt bij het plaatsen van fotos standaard een thumbnail (kleine versie) van je afbeelding aan. Als je bijvoorbeeld "foto1.jpg" upload zal de thumbnail versie "thumb_foto1.jpg" heten.

Het JavaScript document "slideshow.js" dient hiervoor als volgt ingesteld te worden:

Zoek naar (regular expression):

replace: [/(\.[^\.]+)$/, 't$1'],

Vervang dit door (regular expression):

replace: [/^(.*)$/, 'thumb_$1'],

Hints

Het gedrag (snelheid / breedte / hoogte / directory waar plaatjes ingelezen worden) ..... Kan geregeld worden door de volgende instellingen te wijzigen:

var myShow = new Slideshow('show', data, {delay: 4000, controller: false, overlap: false, width: 640, height: 480, hu: '/uploads/images/album/', thumbnails: true, resize: false});

• Wil je gebruik maken van de controller (play / pauze / forward / backward buttons), ze controller dan op "true" kijk in slideshow.css op de paden naar de controller plaatjes goed staan.
• De slideshow_mootools plaatjes worden geplaatst in: <div style="background-color: #FF0000;"> verander dit afhankelijk van jouw breedte / hoogte en kleuren pallet.
• Bewerk "slideshow.css" om je vormgeving aan te passen.

Volgorde van .js aanroep

De volgorde van de mootools en slideshow scripten niet veranderen. In slideshow.js wordt een object aangemaakt die afhankelijk is van mootools.js, deze moet eerst ingeladen worden.

<script type="text/javascript" src="modules/Album/templates/db/slideshow_mootools/js/mootools.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/slideshow_mootools/js/slideshow.js"></script>

Dynamische paden:

In het mootools voorbeeld staat de map waaruit de plaatjes komen hardcoded in de template. Niet zo handig als je een groot aantal albums hebt waarbij de foto's uit verschillende mappen komt. De Album module kent jammer genoeg niet de waarde 'path' maar met wat kunst en vliegwerk is deze wel uit $album->thumbnail te halen.

Bijvoorbeeld:

{* _path verkrijgen uit $album->thumbnail  *}
{assign var=_path value=$album->thumbnail|regex_replace:"/thumb.+$/":""}
{assign var=_path value=$_path|regex_replace:"/http:\/\/www.yourdomainname.nl/":""}

{*  $_path gebruiken voor javascript definitie *}

[literal]						
				};
				var myShow = new Slideshow('show', data, {delay: 4000, controller: false, overlap: false, width: 460, height: 345, hu: '', thumbnails: true, resize: false});
			});
			//]]>
		</script>
        
[/literal]

Help & Documentatie

Wanneer de Album module succesvol geinstalleerd is kan binnen het Admin gedeelte van het CMS hulp gevonden worden onder Module help en Template help. Iedere JavaScript library kent zijn eigen documentatie raadpleeg hiervoor de verschillende project websites:

• GreyBox
• LightBox
• FloatBox
• Slideshow 2