Hello, I have create am image gallery with "Image Gallery Maker" to show the picture on a dedicated page. So far so good, when clicking on the page you will see all thumbs and descriptions.
Unfortunately there exists a difference between InternetExplorer and Firefox. When using Firefox, you can open a picture and can go forward and backward (lightbox is working well), but when using InternetExplorer I have some problems. When clicking a thumb the picture will be shown in a new IW windows and there is no way to go backward and forward.
<!-- BEGIN IMAGES_LIST_1 --><li><a href="$config[dir_files]$aData[sFileName]" rel="lightbox-page" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a>$aData[sDescriptionContent]</li><!-- END IMAGES_LIST_1 --> <!-- BEGIN IMAGES_DESCRIPTION_1 --><div>$aData[sDescription]</div><!-- END IMAGES_DESCRIPTION_1 --> <!-- BEGIN IMAGES_HEAD_1 --><ul class="imagesList" id="imagesList1"><!-- END IMAGES_HEAD_1 --> <!-- BEGIN IMAGES_FOOT_1 --></ul><!-- END IMAGES_FOOT_1 -->
<!-- BEGIN IMAGES_LIST_2 --><li><a href="$config[dir_files]$aData[sFileName]" rel="lightbox-page" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a>$aData[sDescriptionContent]</li><!-- END IMAGES_LIST_2 --> <!-- BEGIN IMAGES_DESCRIPTION_2 --><div>$aData[sDescription]</div><!-- END IMAGES_DESCRIPTION_2 --> <!-- BEGIN IMAGES_HEAD_2 --><ul class="imagesList" id="imagesList2"><!-- END IMAGES_HEAD_2 --> <!-- BEGIN IMAGES_FOOT_2 --></ul><!-- END IMAGES_FOOT_2 -->
<!-- BEGIN IMAGES_LIST_3 --><li><a href="$config[dir_files]$aData[sFileName]" rel="lightbox-page" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a>$aData[sDescriptionContent]</li><!-- END IMAGES_LIST_3 --> <!-- BEGIN IMAGES_DESCRIPTION_3 --><div>$aData[sDescription]</div><!-- END IMAGES_DESCRIPTION_3 --> <!-- BEGIN IMAGES_HEAD_3 --><ul class="imagesList" id="imagesList3"><!-- END IMAGES_HEAD_3 --> <!-- BEGIN IMAGES_FOOT_3 --></ul><!-- END IMAGES_FOOT_3 -->
Now we add it to templates/default/pages_default.tpl changing:
[tpl]$aImages[1]<!-- here is content from IMAGES_DEFAULT or other IMAGES_xx blocks --> $aImages[2]<!-- here is content from IMAGES_DEFAULT or other IMAGES_xx blocks --> [/tpl]
to:
[tpl]$aImages[1]<!-- here is images left position --> $aImages[2]<!-- here is images right position --> $aImages[3]<!-- here is images gallery position 1 --> $aImages[4]<!-- here is images gallery position 2 --> $aImages[5]<!-- here is images gallery position 3 --> $aImages[6]<!-- here is images gallery position 4 -->[/tpl]
For the database/config/general.php add new photo Gallery types:
-Second solution: For the templates/default/style.css add:
[css] #imagesList3 li .gallery, #imagesList4 li .gallery, #imagesList5 li .gallery, #imagesList6 li .gallery{height:124px;} .gallery{}[/css]
and for thetemplates/default/pages_default.tpl changing:
[tpl] <ul class="imagesList" id="imagesList$aData[iType]"><!-- START LIST --> <li> <a href="$config[dir_files]$aData[sFileName]" class="mlbox[pages]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION --> <div>$aData[sDescription]</div><!-- IF:END DESCRIPTION --> </li><!-- END LIST --> </ul> [/tpl]
to:
[tpl] <ul class="imagesList" id="imagesList$aData[iType]"><!-- START LIST --> <li><div class="gallery"> <a href="$config[dir_files]$aData[sFileName]" class="mlbox[pages]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a></div><!-- IF:START DESCRIPTION --> <div>$aData[sDescription]</div><!-- IF:END DESCRIPTION --> </li><!-- END LIST --> </ul> [/tpl]
Now the descriptions of the photographs will also be equal. Style is the thumbnail of 150 px. Do not use the Left and Right together with the Gallery. It is better to create Left_1 etc. and Right_1 etc. I tested only in Firefox10 and Chrome 17.0.963.46 10, OS Linux. Other webbrowser?
Thanks Guido. Your CSS is better. My css code is also useful. I have one line: img 1, img 2 img 3, img 4, in the second line: for example, only the img 5. I can decide in which column. I used your code css as a jquery gallery; http://http://quickcms.comze.com/?jq-galeria-1,4 . In another jQ gallery is the code:
Due to the fact, that I had still problems with ImageGalleryMaker I have decided to google for a new solution. I have found VisualLightBox and this tool is pretty simple and easy to handle ImageGalleries. It will create *.html with all necessray parameters - just copy the source to QC (plus some files) and enjoy the gallery.
