maxigallery - presentation problem in mozilla

6 Posts

frl_smilla Reply #1, 17 years, 7 months ago

During image presentation the image layout is distorted. Depend on selecting the button previous or next - the y-position of the half-image changes. The maxigallery runs in internet explorer without any problems.

I used the following versions:
modx-version (0.9.6.3-RC2) and maxigallery (0.5.2)

You can see maxigallery failure.. http://www.spunk4u.de/barcelona.html

I have no idea, because the maxigallery also runs in other web sites.

1,161 Posts

Photowebmax Reply #2, 17 years, 7 months ago

Its doing the same thing in Safari as well. It looks like the hover style is taking over the whole one side of the image and not letting go?

While you are figuring this out I would take a stab at correcting some of the XHTML validation errors as well...

Max

1,161 Posts

Photowebmax Reply #3, 17 years, 7 months ago

Looking at the following code it looks like the dimensions for the overlay, the images and the prev/next dimensions do not match up?

<div id="lbOverlay" style="visibility: visible; opacity: 0.8; top: 176px; height: 556px;"/>
<div id="lbCenter" style="background: rgb(0, 0, 0) url(assets/snippets/maxigallery/slimbox/images/loading.gif) no-repeat scroll center center; width: 590px; height: 447px; margin-left: -295px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; top: 213.067px;" class="">
<div id="lbImage" style="visibility: visible; opacity: 1; background-image: url(http://www.spunk4u.de/assets/galleries/72/moses013.jpg); width: 570px; height: 427px;">
<a id="lbPrevLink" href="#" style="height: 427px; background-repeat: no-repeat; background-position: left 15%;" onmouseover="this.style.backgroundImage="url(assets/snippets/maxigallery/slimbox/images/prevlabel.gif)"; this.style.backgroundRepeat="no-repeat"; this.style.backgroundPosition="left 15%";" onmouseout="this.style.backgroundImage="";"/>
<a id="lbNextLink" href="#" style="height: 427px;" onmouseover="this.style.backgroundImage="url(assets/snippets/maxigallery/slimbox/images/nextlabel.gif)"; this.style.backgroundRepeat="no-repeat"; this.style.backgroundPosition="right 15%";" onmouseout="this.style.backgroundImage="";"/>

Max

6 Posts

frl_smilla Reply #4, 17 years, 7 months ago

Thanks for your quick answer, but I have no idea to fix my problem. Can the maxigallery be influenced by the main css file (modx template). I thought this will be independly from each other. I assume that there are prbably other versions of java script library as mootools in the choosen modx version hat are not compatible with maxigallery version.

In the next step, I will change the template of the side, to verify if the problem still occurs.

What do you mean with validation errors on my side - the webdeveloper toolbars shos no errors.

Thanks for your help.

frl_smilla

1,161 Posts

Photowebmax Reply #5, 17 years, 7 months ago

I think whenever you are experiencing the "my site is not working" blues its a good idea to validate your page code. Go here: http://www.w3.org/ and click on the HTML validator in the big left side box. Doing so is a good idea as it will help make your site more consistent across all the browsers out there. It also helps eliminate the markup structure as a possible cause of any issues you may be having. Sometimes you will scream at a MODx snippet but its a missing closing div or some other markup snafu that is the culprit.

In a bit I will take a look at the code generate by some of my MaxiGallery pages and see if there is anything screaming at me. My hunch though is that you have a conflicting CSS issue with the overlay...

1,161 Posts

Photowebmax Reply #6, 17 years, 7 months ago

It looks like your site gallery is behaving itself now?

What did you do?

6 Posts

frl_smilla Reply #7, 17 years, 7 months ago

Thanks for your good advice and support. I made CSS validation with my side. The image css tags of my side were not compatible to the css style of the maxigallery. There were two fortmat styles for images and this is certainly not working. I made this part in the spunk.css file inactive. In the next step I will make a new class for presentation of image and text of the side, so that it can not influence presentation of maxigallery images.

often a little hint is suffisant. wink