Lightbox 2.04

Vandaag gewerkt met "Lightbox 2.04". Dit is een toepassing die is bedoeld om binnen een (HTML)webpagina op een professionele wijze foto's weer te geven. Vrij simpel:

1. Download lightbox = een map met bestanden: images (bevatten de foto's), js, css en een HTML file als voorbeeld. ( zie: http://www.huddletogether.com/projects/lightbox2/ )


2. Open de HTML file en volgt de instructies.


3. 
   
   Open 'beeld' en vervolgens 'paginabron' om achter de HTML site te kijken hoe actionscript moet worden geplaatst binnen HTML pagina van de eigen site.
   
   Dit betekent dat de volgende scripts binnen de "head" van de site geplaatst moeten worden:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>


<script src="js/lightbox.js" type="text/javascript"></script>

1. Plaats (upload) de js en css en images mappen in de map waarin de te bewerken website zich bevind.


2. 
   
   Kopieer de link(en) uit de voorbeeld HTML naar de pagina waar de foto's geplaatst moeten worden.
   
   Dit betekent dat de volgende linken geplakt moeten worden (binnen de HTML code) op de plaats waar de foto's vertoond moeten worden:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

1. Pas deze linken aan zodat ze verwijzen naar foto's die werkelijk in de "images" map bevinden van de te bewerken site.


2. "insert" een thumb van de te bekijken foto's binnen de geplaatste linken op de plaats waar nu >image #1< staat of: bewerk deze tekst zodat ze logisch verwijzen naar de te vertonen foto.

Lightbox is een kadootje voor elke webmaster. Volg gewoon de algemene logica van het webbouwen (= zorg ervoor dat alle linken verwijzen naar hetgeen jij wilt laten zien) en je website krijgt direct een vrij professionele uitstraling. Vergeet niet om de illustraties uit de map 'images' zoals je die aantreft in de lightbox map te uploaden naar de images map van je website. In deze map zitten een paar iconen die worden weergegeven via de geuploadde scripts. Daar bevindt zich bijvoorbeeld het icoontje 'close' dat wordt weergegeven bij het openen van een illustratie is lightbox zodat de bezoeker weet waar te klikken om de illustratie weer te laten verdwijnen.

Voor meer info stuur mij even een mailtje,

Meindert A. Jorna

Spidermanwebdesign@gmail.com

Kijk ook eens op:

www.spiderman-webdesign.nl

of:

www.dewebmeester.nl

Joomla, oscommerce, magento of zencart? Vergelijk!

Mijn klanten lijken vaak voor het uiterlijk te gaan. Maar bij het starten van een webwinkel behoor je niet alleen naar het uiterlijk te kijken. Hieronder een handig schema. Maar klanten weten daar toch weinig raad mee. Mijn conclusie: Ga voor Joomla. Dan heb je een compleet CMS, kun je alle artikelen, pagina's, illustraties e.a. aanpassen (dus ook de zaken buiten de webwinkel), heb je een mooiere vormgeving dan oscommerce en meer ondersteuning van forums en leden dan bij Magento of Zen Cart. Maar hierbij een (niet compleet) overzicht. Ik hoop het binnenkort nog even aan te vullen.

Groeten, dewebmeester.nl

De belangrijkste systemen naast elkaar

	Magento	Oscommerce	Zen Cart	VirtueMart (Joomla)
Gratis licentie	Ja	Ja	Ja	Ja
Onbeperkt aantal producten	Ja	Ja	Ja	Ja
Ondersteund SSL	Ja	Ja	Ja	Ja
Wijzigen Producten	Ja	Ja	Ja	Ja
Wijzigen klanten	Ja	Ja	Ja	Ja
Admin kan Producten In Order aanpassen	Ja	Nee	Plug-in	Nee
Spreadsheet Database Upload	Ja	Nee	Plug-in	Nee
Product Attributen	Ja	Ja	Ja	Ja
Meerdere Product Images	Ja	Nee	Ja*	Ja
Coupons	Ja	Nee	Ja	Nee
Afwijkende prijzen per klantgroep	Ja	Nee	Ja	Ja
Grafisch Template Systeem	Ja	Nee	Ja	Ja
Live Verzendkosten berekenen	Ja	Ja	Ja	Ja
Google Checkout Voorgeinstalleerd	Ja	Nee	Nee	Nee
Paypal	Ja	Ja	Ja	Ja
Paypal Pro	Ja	Nee	Ja	Nee
Content Management Systeem vor extra Pagina's	Ja	Nee	Ja	Ja
Aanpassen meta tags	Ja	Ja	Ja	Nee
SEO URLs	Ja	Ja	Ja*
Afrekenen op 1 pagina	Ja	Nee	Optie	Nee
Meertaligheid	Ja	Ja	Ja*	Ja
Meerdere valuta	Ja	Ja	Ja	Ja
Multi-Store ondersteuning	Ja	Nee	Optie	Nee
Web Hosting Requirements	Semi Dedicated	Shared Hosting	Shared Hosting	Shared Hosting

 

Hieronder informatie van een ander adviesbureau (ook handig):

Lees verder over de verschillende webwinkel systemen

Zen Cart webwinkel Zen Cart webwinkel...  Lees meer

Magento webwinkelHet lijkt erop dat er concurrentie aankomt voor de diverse populaire webshopscripts (osCommerce, Zen...  Lees meer

osCommerce webwinkelOnline winkel en e-commerce oplossing waarvan de ontwikkeling volgens de Open Source methode wordt...  Lees meer

Joomla!

VirtueMart webwinkelVirtueMart is een webwinkelcomponent van Joomla!. Naast de internetwinkel zelf kunnen binnen Joomla...  Lees meer

Flash als achtergrond website

Het wordt steeds gekker met ons. Eerst waren we blij dat we teksten aan elkaar konden versturen, toen kwamen de illustraties en vonden we het vervolgens leuk om illustraties als achtergrond te gebruiken. Toen ontdekten we bewegende beelden, flash en de volgende stap is dan: achtergronden in flash. Je ziet ze niet veel: websites met een bewegende (flash) achtergrond. De reden kan natuurlijk zijn dat dit te druk wordt maar volgens mij is de reden vooral dat het vrij moeilijk is om dit gedaan te krijgen. Hierbij een korte workshop:

Hier is wat HTML code:

<div id="bg">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="Snow" width="100%" height="575" align="top" id="Snow">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf"/><param name="menu" value="false" /><param name="scale" value="noscale" /><param name="salign" value="t" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><param name="QUALITY" value="low"> <embed src="http://www.homedics.com/skin/frontend/hmdx_us/default/images/media/Snow.swf" width="100%" height="575" align="top" menu="false" quality="low" scale="noscale" salign="t" wmode="transparent" bgcolor="#ffffff" name="Snow" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

In de CSS file:

#bg { margin-bottom:-575px; position:fixed; width:100%; top:0; left:0; }

Dit is het voorbeeld uit http://homedics.com/

Nu nog even aanpassen. Ik ga er mee bezig en houd jullie op de hoogte.