an issue with maxigallery

1,717 Posts

coroico Reply #1, 19 years, 11 months ago

Hi everybody,

I start with Modx and the snippet Maxigallery. With the following snippet call :

[[MaxiGallery? &display=`embedded` &embedtype=`slidebox` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`]]

Tests have been done on local XP windows platform with easyphp 1.8 with Maxigallery v0.4.1 & MODX 0.9.2.1 under Firefox 2.0

the issue is that : when the normal image is displayed, the thumbnails of the gallery (under the image) are not masked but stayed on a first plan and overlaid the image.

This issue doesn’t occur with IE 6.0

Does anybody understand what happens ? Thanks for your answer.

4,213 Posts

doze Reply #2, 19 years, 11 months ago

This is a css issue, are you using mollio template by any chance`? There’s a z-index 9999 set to some classes that the gallery uses, so you need to edit the css to fix this..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,717 Posts

coroico Reply #3, 19 years, 11 months ago

Thanks Doze for your answer.

Yes i use Mollio template. I got the source code from http://www.modxcms.com/Mollio-template-package-731.html

Here is my main.css file (extract related to thumbnails) :

	
.thumbnail {margin: 0 0 0 10px;position:relative;z-index:9999;border: 1px solid #eee;float:right;width:100px;padding:5px;background:#fff}

.thumbnail img {border: 1px solid #000}

And here is the source code of the page :

			
<!-- --><!-- --><!-- --><!-- --><table class="galleria" border="0" width="100%"><tr>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn4035.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4035.JPG" class="thumbnail" title="Samovar » Click to zoom ->" alt="Samovar » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn4039.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4039.JPG" class="thumbnail" title="Lac Baikal » Click to zoom ->" alt="Lac Baikal » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn4064.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4064.JPG" class="thumbnail" title="Maison de Listvianska » Click to zoom ->" alt="Maison de Listvianska » Click to zoom ->" /></a>
		</td></tr><tr>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn4111.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4111.JPG" class="thumbnail" title="Avec zvieta » Click to zoom ->" alt="Avec zvieta » Click to zoom ->" /></a>

		</td>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn4225.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4225.JPG" class="thumbnail" title="Papparazi » Click to zoom ->" alt="Papparazi » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><a href="http://127.0.0.1/modx/assets/galleries/48/dscn3882.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn3882.JPG" class="thumbnail" title="Sur la place rouge » Click to zoom ->" alt="Sur la place rouge » Click to zoom ->" /></a>
		</td></tr></table>

I got your css file (http://www.netguru.fi/modx/assets/templates/mollio/css/main.css). I found the following lines related to thumbnails (and close to my own css definition for thumbnails) :

	.thumbnaili {margin: 0 0 0 10px;position:relative;z-index:9999;border: 1px solid #eee;float:right;width:100px;padding:5px;background:#fff}
	.thumbnaili img {border: 1px solid #000}

and the source code of the page http://www.netguru.fi/modx/maxigallery-slidebox.html is :

<table class="galleria" border="0" width="100%"><tr>
		<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0041.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0041.jpg" class="thumbnail" title="Test title for pic 1 » Click to zoom ->" alt="Test title for pic 1 » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0037.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0037.jpg" class="thumbnail" title="Pic 2 » Click to zoom ->" alt="Pic 2 » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0038.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0038.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" /></a>
		</td></tr><tr>

		<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0039.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0039.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" /></a>
		</td>
		<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0040.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0040.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" /></a>
		</td></tr></table>

Why have you defined thumbnaili classes ? and why do you use Thumbnail (instead of thumbnaili) classes in the code ? What are the difference between these two classes ? What should be the correct writing of the thumbnail css definition ?

my own css definition for thumbnail has a z-index parameter with 9999 value. So what could be wrong ?

Sorry for my request, but i do not understand how i could fix this issue. Thanks for your help.

1,717 Posts

coroico Reply #4, 19 years, 11 months ago

I confirm my analyse. When i declare thumbnaili instead of thumbnail in my css, the snippet works properly with firefox 2.0. The image is correctly displayed and thumbnails are masked.

So, as the thumbnaili classe isn’t used, i deduce that the snippet works properly when the thumbnail class is not declared.
And effectively when i delete the two thumbnails declaration in my css file, the snippets works as awaited.

How could i use the thumbnails css definition ?

1,717 Posts

coroico Reply #5, 19 years, 11 months ago

With IE 6.0, the description label, the back, next and close links aren’t displayed.
As i don’t know if it is linked with the previous post or not, i continue on the same post (issue with Firefox)

With Firefox (without the classes thumbnail defined) the behaviour is correct (description label and links are displayed).

The only differences between the source code of my page and the source code of http://www.netguru.fi/modx/maxigallery-slidebox.html are the following :

On netguru :

<td align="center" style="width:33%"><br /><p class="slidebox"><a href="http://www.netguru.fi/modx/assets/galleries/15/cat_0041.jpg" rel="lightbox_assets/galleries/15/gallery"></p><img src="assets/galleries/15/tn_cat_0041.jpg" class="thumbnail" title="Test title for pic 1 » Click to zoom ->" alt="Test title for pic 1 » Click to zoom ->" /></a>
</td>

On my site :

<td align="center" style="width:33%"><br /><a href="http://localhost/modx/assets/galleries/48/dscn4035.JPG" rel="lightbox"><img src="assets/galleries/48/tn_dscn4035.JPG" class="thumbnail" title="Samovar » Click to zoom ->" alt="Samovar » Click to zoom ->" /></a>
</td>

The main difference seems to be the usage of a class slidebox
I didn’t find this class in the Css files (on netguru and on my site), so i don’t know if it is really used !

So i don’t know how progress on this new issue.

If somebdy use the slidebox option of maxigallery, could you post an extract of your source code + extract of css file.
Thanks

4,213 Posts

doze Reply #6, 19 years, 11 months ago

Hello,

I had added the extra "i" to the thumbnail class in mollio css in my site just that it would not be used for the maxigallery thumbnails.

I havent heard problems with the slidebox picture descriptions and nex/prev labels in ie 6 previously.. They come to the slidebox from a XML file. My site has some dev code running currently what uses newer version from slidebox, so the xml file link is not included there to the source, but in your site you should see something like this in the source:

<script type="text/javascript">var xml_url = ’assets/galleries/<doc id number>/gallery.xml’;</script>

Do you see that when viewing with IE 6? If you access that url, does the xml file have data in it? Also make sure that you clear IE cache..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,717 Posts

coroico Reply #7, 19 years, 11 months ago

Hello Doze,

Yes i see the url to the xml file (http://localhost/modx/assets/galleries/48/gallery.xml) and the data inside it are the following ...

 
<?xml version="1.0" encoding="iso-8859-1" ?> 
- <response>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn4035.JPG">
- <title>
- <![CDATA[ Samovar
  ]]> 
  </title>
- <caption>
- <![CDATA[ Samovar dans le transsibérien
  ]]> 
  </caption>
- <number>
- <![CDATA[ 1/6
  ]]> 
  </number>
  </source>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn4039.JPG">
- <title>
- <![CDATA[ Lac Baikal
  ]]> 
  </title>
- <caption>
- <![CDATA[ Vers port Baikal au matin
  ]]> 
  </caption>
- <number>
- <![CDATA[ 2/6
  ]]> 
  </number>
  </source>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn4064.JPG">
- <title>
- <![CDATA[ Maison de Listvianska
  ]]> 
  </title>
- <caption>
- <![CDATA[ 
  ]]> 
  </caption>
- <number>
- <![CDATA[ 3/6
  ]]> 
  </number>
  </source>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn4111.JPG">
- <title>
- <![CDATA[ Avec zvieta
  ]]> 
  </title>
- <caption>
- <![CDATA[ A Listvianska
  ]]> 
  </caption>
- <number>
- <![CDATA[ 4/6
  ]]> 
  </number>
  </source>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn4225.JPG">
- <title>
- <![CDATA[ Papparazi
  ]]> 
  </title>
- <caption>
- <![CDATA[ Chasseur d'images dans le train
  ]]> 
  </caption>
- <number>
- <![CDATA[ 5/6
  ]]> 
  </number>
  </source>
- <source id="http://127.0.0.1/modx/assets/galleries/48/dscn3882.JPG">
- <title>
- <![CDATA[ Sur la place rouge
  ]]> 
  </title>
- <caption>
- <![CDATA[ A nous Moscou
  ]]> 
  </caption>
- <number>
- <![CDATA[ 6/6
  ]]> 
  </number>
  </source>
  </response>

So where is the error ?

Thanks

4,213 Posts

doze Reply #8, 19 years, 11 months ago

Don’t really know.. haven’t heard from anyone else of such problem, and I already thought that the xml file is ok because firefox is working.. Have you modified any of the MaxiGallery files? I mean any of those files that are in the downloadable archive.. php, js, css..?

If someone has had similar issues, please report..

Also, if you like, I could give you the dev code that I’m running on my site to see if there’s any help.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

1,717 Posts

coroico Reply #9, 19 years, 11 months ago

Hello Doze

I have reinstalled Modx, Mollio template and Maxigallery snippet. I don’t know why, but now all seems Ok with Firefox and IE. I have the previous, description and next labels correctly displayed with the slidebox option.
So, at the end, the only one issue found, is related to the main css file of Mollio template : the thumbnail class has a index-z so hight that, with Firefox (not with IE), the thumbnail stay over the image when you display it.

Sorry for the troubles and thanks for your help

4,213 Posts

doze Reply #10, 19 years, 11 months ago

Yep, that’s just a css collision what are bound to happen when you use ready made templates..

BTW, just a hint that there is a beta version out from the next version of maxigallery what does everything that 0.4.1 did, but has a templating ability. With that version, you can easily make the css class names to be anything you want..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."