In meinem ersten Beitrag möchte ich einfache Galerie vorstellen, die rein mit TypoScript erstellt werden kann und doch flexibel ist. Die Bilder werden in den Seiteneigenschaften eingepflegt und der Besucher bekommt ein Bild in groß und die weiteren als Thumbnail. Eine Demo gibt es hier

lib.imageswap = COA
lib.imageswap {
	# BIG IMAGE
	1 = IMAGE
	1 {
		file {
			maxW = 400
			maxH = 300

			import= uploads/media/
			import.data = levelmedia: -1,slide
			import.listNum = 0
			import.override.field = media
		}
		params = name="image_big" class="bigimg"
	}

	# SMALL THUMBS
	10 <.1
	10 {
		file {
			maxW = 100
			maxH = 50
		}
	params = onclick="swap('image_big', this)" class="smallimg"
		
		longdescURL.cObject = IMG_RESOURCE
		longdescURL.cObject.file {
			import.data = TSFE:lastImageInfo|origFile
			maxW = 400
			maxH = 300
		}
	}
	
	20 <.10
	20.file.import.listNum = 1
	30 <.10
	30.file.import.listNum = 2
	40 <.10
	40.file.import.listNum = 3
	50 <.10
	50.file.import.listNum = 4
	
	# JS
	100 = TEXT
	100.value (
		<script type="text/javascript">
		  <!--
		  function swap(imgname,image) {
		     document.images[imgname].src =
		     image.getAttribute('longdesc');
		  }
		  //-->
		</script>	
	)
}

Zur Erklärung des TS

• An Stelle 1 des COA wird das große Bild erstellt, wobei der name-Tag wichtig für den späteren JS-Austausch ist.
• Positionen 10-50 sind für die Thumbnails zuständig, wobei im longdesc-Tag der Pfad zur großen Variante gespeichert ist. Wichtig ist, dass die Größe mit der des großen Bildes übereinstimmt.
• An letzter Stelle (100) wird eine simple JavaScript-Funktion eingebunden, die für den Austausch verantwortlich ist

Das Ende meines 1. Beitrags würde ich noch für ein Danke an Tim nützen, der es mir ermöglicht hat, hier zu bloggen.

Bookmark It