Nieuwe module: Gallery

[rednose]

Top module. Ik heb het makkelijk kunnen inbinden in een omgebouwde nieuws site. ( referenties). Het werkte ook allemaal geweldig. Nu wil mijn klant liever geen fancybox oid. maar een filmstrip zoals hier http://www.buronord.ch/website-multimedia/  bij de 2e referentie. Die hebben dat met flash opgelost, maar ik ben niet zo gek op flash.

Voor mij de ideale oplossing had ik gevonden bij dhtmlgoodies.com, maar ik krijg het niet voor elkaar dit te integreren met de smartys en de module.

Code: Select all

<div id="dhtmlgoodies_slideshow">
	
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<p>{$imagecount}</p>
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>
<div id="galleryContainer">
		 <div id="arrow_left"><img src="uploads/images/arrow_left.gif">left</div> 
		<div id="arrow_right"><img src="uploads/images/arrow_right.gif">right</div>
		
            <div id="theImages">
{foreach from=$images item=image}
	
<a href="{$image->file}" onclick="showPreview({$image->file},'1');return false"><img src="{$image->thumb}" alt="{$image->title}"  ></a>

	 		
{/foreach}</div><br />

<div id="previewPane">	 
<a href="{$image->file}" title="{$image->title}<br />{$image->comment|escape:'html'}"><img src="{$image->file}"></a>
 

		<span id="waitMessage">Loading image. Please wait</span>	
		
	


	</div> 

 
</div>
</div>

en de java

Code: Select all

<__script__ type="text/javascript">
   	/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	UPDATE LOG:
	
	March, 10th, 2006 : Added support for a message while large image is loading
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/ 
   	
	var displayWaitMessage=true;	// Display a please wait message while images are loading?
  	
   		
	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';	
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{			
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}
	
	function releaseSlide()
	{
		var id = this.id;
		this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
		slideSpeed=0;
	}
		
	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;
				
			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}
			
			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);
		
	}
	
	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';	
			activeImage.style.opacity = 0.5;
		}	
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;	
		activeImage = this;	
	}
	
	function initSlideShow()
	{
		document.getElementById('arrow_left').onmousemove = startSlide;
		document.getElementById('arrow_left').onmouseout = releaseSlide;
		document.getElementById('arrow_right').onmousemove = startSlide;
		document.getElementById('arrow_right').onmouseout = releaseSlide;
		
		imageGalleryObj = document.getElementById('theImages');
		imageGalleryLeftPos = imageGalleryObj.offsetLeft;
		imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
		maxGalleryXPos = imageGalleryObj.offsetLeft; 
		minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
		var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
		for(var no=0;no<slideshowImages.length;no++){
			slideshowImages[no].onmouseover = showImage;
		}
		
		var divs = imageGalleryObj.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
		}
		gallerySlide();
	}
	
	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
		if(subImages.length==0){
			var img = document.createElement('IMG');
			document.getElementById('previewPane').appendChild(img);
		}else img = subImages[0];
		
		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath;
		
	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';	
		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
		document.getElementById('largeImageCaption').style.display='block';
		
	}
	window.onload = initSlideShow;
</__script>

de thumbs zijn zichtbaar, de eerste foto ook, maar als ik op een thumb klik gaat een nieuw browser open. Waarschijnlijk zit het im de javascript, die ergens zijn elementId wil halen, maar ik heb geen idee waar ik wat moet gaan aanpassen.  Heeft iemand een idee, of nog beter heeft iemand al een werkend script? 

groetjes Gabrielle

[Jos]

Het openen van een nieuw scherm lijkt er in eerste instantie op te duiden dat de a href link gevolgd wordt. De return false in de onclick is er voor om dat te voorkomen, dus mijn eerste gok is dat er iets mis is met die return false. Misschien doordat er een puntkomma achter ontbreekt?

Of je zou kunnen proberen de return false; aan het einde van de functie showPreview toe te voegen?

[rednose]

Door je tip ben ik weer op een spoor gezet en heb me er een poos mee bezig gehouden.
Conclusie ( het staat ja zelfs in de FAQ eigenlijk) java kan niet met smarty samen omdat ze dezelfde {} gebruiken ( daarom ook die literal)
Dus je had gelijk dat de return niet werkte.
Dus dat is niet zo even op te lossen. Een onclick heb ik met dit script wel nodig.
Ik laat het even bezinken, misschien komt noch de lichtflits deze week.

Kan in geval van nood altijd nog de foto's manueel in de editor invoegen met daar de nodige onclick bevelen.

In ieder geval bedankt voor de snelle reactie.

[Jos]

Het is javascript, java is echt wat anders, maar dat terzijde 

Toch zou je het werkend moeten kunnen krijgen, want de door jou gekozen weergavemethode werkt op vergelijkbare manier als alle bestaande gallery-templates.

Waar heb je nu de {literal} tags staan?

[rednose]

het grote verschil is, dat in jouw templates ( bij het gedeelte "Vorlagenquelle" ) alleen smarty of php/html is en geen javascript. Dat zit echt allemaal netjes in je externe scripts.

het hangt waarschijnljik bij deze zin

Code: Select all

<a href="#" onClick="showPreview({$image->file},'1'); event.returnValue=false; return false;"><img src="{$image->thumb}" alt="{$image->title}"  ></a>	

ik heb het gerprobeerd met literal maar dan kan hij dus al die smartys niet lezen -zucht-
Dus ik zou die onclick functie eigenlijk moeten kunnen onderbrengen in de externe javascript.
Maar daar heb ik ff meer tijd nodig. Normaal gebruik ik eigenlijk zeer weinig javascript, bijna alles wat ik nodig heb is in php ook op te lossen.

Ben deze week nog weg, maar begin volgende week stort ik me er weer op.

[Jos]

Ik ben gisteravond ook even met jouw code aan het stoeien geweest, kom ook in een nieuw scherm terecht overigens.

Vorlagenquelle  Zal de Duitse vertaling zijn ofzo?  ;D

De gehele javascriptcode kun je gewoon plakken in het onderste veld in tabblad sjablonen. Die is speciaal voor javascript bedoeld. Daar hoeven geen {literal}  tags  omheen.

De onclick in de html-code, daar struikelt smarty niet over, dat kun je daar rustig laten staan. Als smarty ergens over valt, dan zie je dat altijd explicitiet in een foutmelding terug (Smarty error, unknown tag oid)

Heb je een link naar de originele code op dhtmlgoodies.com?

[rednose]

Lol,  dat gebeurt als je in zwitserland woont  ;)

http://www.dhtmlgoodies.com/index.html? ... _slideshow
die andere gallerie scripts werken allemaal op dezelfde basis. hier en daar natuurlijk een fade-function meer of minder en andere css, maar basisprincipe blijft ongeveer gelijk.

a href="#" en a href="{image->file} levert geen verschil ( alleen of je de startsite krijgt of de foto in een nieuw scherm.

en ik heb extra de grote foto naar onder verplaatst, omdat hij anders nog geen input had.
Bij wordpress hebben die zo'n plugin, maar daar blik ik helemaal niet door wat die precies gebruiken.
Het ziet er op de site zo simpel uit, zo'n simpele elegante galerie.

Edit: gevonden!!!!!!
Ik was even met een bekende online en die ontpopte zich als programmeur^^
en die zei dat ik nog ff de smarty tag moest quoten , omdat het een string is.

Code: Select all

<a href="#" onClick="showPreview({$image->file},'1'); event.returnValue=false; return false;"><img src="{$image->thumb}" alt="{$image->title}"  ></a>	

soms wordt ik een beetje simple van al die '' en ; enz.

[Jos]

Is het al bij jou opgelost dan nu?

Ik kreeg het daarmee nog niet aan de praat, maar toen ik het previewpane bovenaan zette, werkte alles ineens wel
Dat deed ik met de volgende code:

Code: Select all

<div id="previewPane">
	<img src="{$images[0]->file}">
	<span id="waitMessage">Loading image. Please wait</span>	
	<div id="largeImageCaption">{$images[0]->title} - {$images[0]->comment}
</div>

En wat die quotes betreft, doe maar beter zo:
onclick="showPreview('{$image->file}','1');return false"

Wel grappig dat je juist deze weergave mooi vind... Ik was er namelijk een tijd terug al aan begonnen om iets soortgelijks met jQuery te maken.. helaas is mijn kennis van jQuery nog ontoereikend om het goed voor elkaar te krijgen.

[rednose]

ga ik ook nog ff proberen.

In dit geval was het niet eens mijn wens, maar mijn klant is een grafisch designer en heeft zo haar heel eigen ideeen

maar goed, nu kan ik met een gerust hart de details gaan invullen.

[Jos]

soms wordt ik een beetje simple van al die '' en ; enz.

Ooohw... komt daar de naam CMS made simple vandaan 

Maar mooi dat het gelukt is...

[rednose]

nog een kleine aanmerking, dat het ook nog lukt met die pijlen aan de zijkant
in regel 30 van het javascript

Code: Select all

this.getElementsByTagName('IMG')[0].src = images/' + this.id + '_over.gif';    

uploads toevoegen:

Code: Select all

this.getElementsByTagName('IMG')[0].src = 'uploads/images/' + this.id + '_over.gif';

  ( als je daar je pijlen hebt ondergebracht ^^)
en in regel 46 ook nog uploads/ toevoegen.

ben trouwens helemaal blij dat het nu lukt

[realrock]

Jaaa daar issie weer

Jos vraagje, is er een manier om van het comment/omschrijvings veld (backed) een wysiwyg veld te maken?

Voorbaat dank!

[Jos]

vinkje gezien in het opties tabblad? 

[realrock]

vinkje gezien in het opties tabblad? 

Die heb ik gezien, alleen ik zou het zelfde willen doen met de omschrijvingen van de fotos, kan dat ook?

[Jos]

Oke, nee dat heb ik er bewust uit gelaten. De velden met WYSIWYG zijn aanmerkelijk groter qua omvang, dus dat zou de hele admin-pagina overhoop halen.