FancyZoom zeigt PNG und Title nicht an

COPIC

Hallo,

ich habe Probleme mit dem Fancyzoom-Plugin basierend auf FancyZoom 1.1 .

Aus irgendeinem Grund wird bei mir das PNG des Closebuttons nicht transparent angezeigt. Das sieht dann natürlich nicht so schön aus, wenn dann ein Kästchen hervorblitzt. Komischerweise werden die Schatten angezeigt, obwohl die auch PNG's sind. Problem in Opera, FF und IE7.
Wordpress 2.6 DE.

Und beim Titles bzw. Caption wird nur das erste Wort angezeigt. Aber darauf könnte ich noch verzichten

Ich finde da leider einfach keine Lösung, vielleicht kann mir hier jemand helfen?
Um das vielleicht leichter zu machen, würde ich den Closebutton eh ganz weglassen wollen. Da weiß ich halt nicht wo ich was im Code ändern muss.

Vielen Dank für eure Mühen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

COPIC

Niemand da, der mir sagen kann was ich auskommentieren muss? Ich will doch nur den Button ausblenden... :neutral:

marX

Code

#ZoomClose {
display:none;
}

in die style.css des Themes.

COPIC

Vielen vielen Dank marX!

Auf das mit der CSS wäre ich nicht gekommen. Der Button ist jetzt weg, aber darunter erscheint noch ein Kästchen (siehe Anhang). Eine Ahnung, woher das noch kommt?

Ich habe mal den betreffenden Code soweit herausgesucht. Hoffe ich habe nichts übersehen:

Zitat

var inZoombox = document.createElement("div");
inZoombox.setAttribute('id', 'ZoomBox');

inZoombox.style.position = 'absolute';
inZoombox.style.left = '10px';
inZoombox.style.top = '10px';
inZoombox.style.visibility = 'hidden';
inZoombox.style.zIndex = '499';

inBody.insertBefore(inZoombox, inSpinbox.nextSibling);

var inImage1 = document.createElement("img");
inImage1.onclick = function (event) { zoomOut(this, event); return false; };
inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
inImage1.setAttribute('id','ZoomImage');
inImage1.setAttribute('border', '0');
// inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
// inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')

// This must be set first, so we can later test it using webkitBoxShadow.
inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
inImage1.style.display = 'block';
inImage1.style.width = '10px';
inImage1.style.height = '10px';
inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
inZoombox.appendChild(inImage1);
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'ZoomClose');
inClosebox.style.position = 'absolute';

// In MSIE, we need to put the close box inside the image.
// It's 2008 and I'm having to do a browser detect? Sigh.
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}

inClosebox.style.visibility = 'hidden';
inZoombox.appendChild(inClosebox);

var inImage2 = document.createElement("img");
inImage2.onclick = function (event) { zoomOut(this, event); return false; };
inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
inImage2.setAttribute('width','30');
inImage2.setAttribute('height','30');
inImage2.setAttribute('border','0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);

Alles anzeigen

marX

Zitat von COPIC

Der Button ist jetzt weg, aber darunter erscheint noch ein Kästchen (siehe Anhang). Eine Ahnung, woher das noch kommt?

Das kann ich in der von dir oben verlinkten Demoversion leider nicht nachvollziehen. Gibts nen Link zu deiner Testseite?

PS: Codeabschnitte bitte nicht als Zitat auszeichnen, sondern die diversen Code-Tags der Forensoftware benutzen. Danke!

marX

Das Problem bei dir ist, dass Bilder in der style.css eine Hintergrundfarbe zugewiesen bekommen, möglicherweise um einen Rahmeneffekt zu erzeugen:

Code

img, a img {[COLOR="#0000ff"]style.css (line 152) [/COLOR]    


[COLOR="Red"]background-color:#F2F2F1;[/COLOR]
border:0 none;
}

Am einfachsten wäre wohl, eine Ausnahme für Bilder in der #ShadowBox zu definieren:

Code

#ShadowBox img {
background:transparent;
}

Dann sollte alles gehen.

COPIC

Juhhuuuuu! Du ahnst nicht wie dankbar ich bin. Das hatte mich so viele Stunden Fummelei gekostet! Wieder etwas dazugelernt! Freu*

Willkommen! Melden Sie sich an oder registrieren Sie sich.

FancyZoom zeigt PNG und Title nicht an

Jetzt mitmachen!