Image Zoomer text stays visible, why?

[rytis]

:: Featured Image Zoomer v1.5
I tried so hard to get it so that the big image is above the text, so the text does not interfere, but for some reason the image is always behind the text. here's the link to it, maybe you know what to do, I'm almost out of options but to use another script, but i really like this one: http://www.vytasornamental.net/balusters.htm - on the left are images when hovered, the big ones appear to the right, but the text is visible.

[jscheuer1]

It's the z-index of the various text divisions (text1, text2, etc.).

Set this in the stylesheet (addition highlighted):

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
z-index: 1000;
}

</style>

[rytis]

Hey... I want to thank you VERY much! that was easy!!!

[rytis]

One more question, do you know how come the bottom of the images on the left does not appear in the zoom?
http://www.vytasornamental.net/balusters.htm

The original full size image you can see the bottom is not missing, but in the zoom version it's missing http://www.vytasornamental.net/images/type1-full.jpg



I tried reshaping code below in many ways:
$('#image8').addimagezoom({
magnifiersize: [330,450],
magnifierpos: 'right',
cursorshade: true,

[jscheuer1]

In the case of that first one (thumbnail: tn_type1-full.jpg, zoom image: type1-full.jpg), the two images aren't of the same aspect ratio. The thumbnail is 60x200, aspect ratio 0.3 (60/200) and the zoom image is 280X1100, aspect ratio 0.2545454 . . . (280/1100). The two images need to be of the same aspect ratio.

In the case of the second one, the larger image is missing the very top and bottom parts. But the aspect ratio is off there as well because too much blank space shows up at the bottom of the larger image. There the thumbnail's ratio is again 0.3, while the larger image's is 0.339213. Off in the other direction. That's why you see more area, albeit blank, than what's there in the thumbnail.

An easy way to get two images, one larger and one smaller to be of the same aspect ratio is to start off with the larger image. Get it however you want it to be as far as cropping, etc. goes. Then make a copy resized in an advanced image editing program like PhotoShop, Paint Shop, The Gimp, etc. Make sure that the 'maintain aspect ratio' checkbox is checked.

[rytis]

For some reason I'm getting the text on top again, but in one page only, I wonder what it is: http://www.vytasornamental.net/concr...ccessories.htm

:: Featured Image Zoomer v1.5
I tried so hard to get it so that the big image is above the text, so the text does not interfere, but for some reason the image is always behind the text. here's the link to it, maybe you know what to do, I'm almost out of options but to use another script, but i really like this one: http://www.vytasornamental.net/balusters.htm - on the left are images when hovered, the big ones appear to the right, but the text is visible.

[jscheuer1]

On that one page you missed adding the z-index for the magnifier class. For more information, see post #2 in this thread.

[rytis]

Thanx. sorry to keep bothering you, but now I got similar problem here: http://www.vytasornamental.net/ceiling-designs.htm its not zoomer but album display
Enlarged images are behind, text and images on the right are in front of enlarged images when you click images on the left

[jscheuer1]

In the ddphpalbum.css file (about line #45), change the z-index for the thumbBox to 100:

 . . . vlinks a:hover, .albumnavlinks a.current{ /*CSS for currently selected navigational link*/
border: 1px solid #2b66a5;
background-color: yellow;
}

/* ######### CSS for thumbnail viewer plugin ######### */

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 8px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 100;
cursor: hand;
cursor: pointer;  
box-shadow: 5px 5px #818181; /* Experimental box shadow properties*/
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5,  positive=true)"; /* IE8 drop shadow*/
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5,  positive=true); /* IE drop shadow*/
}

#thumbBox .foot . . .

[rytis]

I can not find any of these words on that file, here are some of the contents around line 45:

this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
this.dimensions=setting.dimensions || [3,3]
this.sortby=setting.sortby || ["file", "asc"],
this.autodesc=setting.autodesc
this.showsourceorder=setting.showsourceorder
this.onphotoclick=setting.onphotoclick || function(){}
this.photodivs=[] //array referencing each DIV that contains a slide
this.navlinks=null //HTML collection
if (setting.sortby[0]=="file") //sort by filename (asc)
this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
else //sort by date (asc)
this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
if (setting.sortby[1]=="desc"){
this.albumvar.images.reverse()
}
this.buildgallery()
this.buildnav()
}

phpimagealbum.prototype={

buildgallery:function(){
var thisalbum=this
var curimage=0
document.write('<div id="'+this.albumdivid+'">')
for (var rows=0; rows<this.dimensions[1]; rows++){
for (var cols=0; cols<this.dimensions[0]; cols++){
if (curimage<this.albumvar.images.length)
document.write('<div class="photodiv">' + phpimagealbum.routines.buildimage(this.albumvar, curimage, this.autodesc, this.showsourceorder) + '</div>')
curimage++
} //end cols loop
document.write('<br style="clear: left" />')
} //end rows loop
document.write('</div>')
var albumdiv=document.getElementById(this.albumdivid)
var alldivs=albumdiv.getElementsByTagName('div')
for (var i=0; i<alldivs.length; i++){
if (alldivs[i].className=="photodiv")
this.photodivs.push(alldivs[i])
}
phpimagealbum.routines.addEvent(albumdiv, function(e){
var e=window.event || e
var target=e.srcElement || e.target
if (target.tagName=="IMG" && target.getAttribute('data-index')){
thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
}
}, "click")