Simple image gallery that takes the pictures from the media field

Submitting your vote...
Rating: 4.4 of 5. 12 vote(s).
Click the rating bar to rate this item.

Following snippet creates a simple image gallery where the images are read from the media field.

If on the actual page are no images, this snippet searches the rootline until it finds some.

Every image is beeing displayed as thumbnail and if you click on it the scaled image is shown with javascript.

 

temp.imgbar=COA
# first smal image

temp.imgbar.20.5.stdWrap.wrap=<div class="imgsmall"><img onClick="document.getElementById('imgbig').src='|'"  src=
temp.imgbar.20.5=IMG_RESOURCE
temp.imgbar.20.5.file {
  import.data = levelmedia: 9,slide  
  import = uploads/media/
  import.listNum = 0
  file.width=392
  file.height=260
}
temp.imgbar.20.10=IMG_RESOURCE
temp.imgbar.20.10.stdWrap.wrap="|"></div >

temp.imgbar.20.10.file {  
  import.data = levelmedia: 9,slide  
  import = uploads/media/
  import.listNum = 0  
  width = 123  
  height= 83
}

# the big image
temp.imgbar.10<temp.imgbar.20.10
temp.imgbar.10=IMG_RESOURCE
temp.imgbar.10{
  file.import.listNum = 0  
  file.width=392
  file.height=260
  stdWrap.wrap=
  <div class="imgbig" style="float: right;"><img id="imgbig" src="|" height="260" width="392" alt="" /></div>
   
}

# 2. small image
temp.imgbar.30<temp.imgbar.20
temp.imgbar.30.10{
  stdWrap.wrap= "|">
  file.import.listNum = 1
}
temp.imgbar.30.5.file.import.listNum=1

#3. smal image
temp.imgbar.40<temp.imgbar.30
temp.imgbar.40.10{
  file.import.listNum = 2
}
temp.imgbar.40.5.file.import.listNum=2

 

 

Visual example for simple imagegallery from media field



Comments


alan, 02-04-08 17:50:
im still relatively new to typo and i've tried adding this to my site but i just can't get it working. what to i have to add to get it working on my site?

Add comment

* - required field

*



*
*

Top 10 Updates

Contact us geändert am  21-Jul-2013 11:33:07
Contact us geändert am  21-Jul-2013 11:33:03
Useful Links geändert am  24-Apr-2013 08:31:20
Nice fonts using Google font API geändert am  20-May-2010 16:36:47
TS-based Searchbox for Indexed Search  geändert am  18-May-2010 18:27:15
TYPO3 SEO geändert am  30-Apr-2010 09:44:22
Search engine friendly graphical headers in TYPO3 geändert am  30-Apr-2010 09:33:44
Creating a simple Infocenter using TYPO3 geändert am  17-Nov-2009 12:12:52
Making the Section Menu work correctly with TemplaVoila geändert am  05-May-2009 12:27:17
Show pages with type "Not in Menu" in a sitemap geändert am  05-May-2009 12:11:17

Latest comments

29-Sep-2014 14:27:28
Amit Amit schrieb: Hmm ..Good write-up, I am normal vtioisr of one's web site, maintain up the excellent operate, and...
Random content
29-Sep-2014 14:03:00
Farah Farah schrieb: AdBlockPlus hatte ich frfcher auch installiert, iwihzscnen aber nicht mehr, weil ich eigentlich,...
Sample: Different header formatting for each column
29-Sep-2014 13:58:03
Revan Revan schrieb: Hi Milena,I just noticed your comnemt now, sorry for the delay.The only current drawback of the...
Show UID near the pagetitle in the backend page tree
Deutsch
Search: