Problem mit der Thickbox-Größe

[sunflash]

Huhu, ich mal wieder =)
Habe ein Problem mit der Thickbox. In der product_options_dropdown habe ich folgenden Link eingebunden:

Code: PHP  [Auswählen]

<a class="thickbox" title="TITEL TITEL TITEL" href="popup_content.php?coID=11&amp;KeepThis=true&amp;TB_iframe=true&amp;height=600&amp;width=800"><img alt="TEXT TEXT TEXT" src="images/mass_icon.jpg"> Maßanleitung</a>

Doch die Box hat nur eine total geringe Höhe. Die Breite stimmt, die Höhe nicht. Gut zu sehen auf den Bildern im Anhang.

[ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]

Wisst ihr vielleicht wie ich das gebacken bekomme?
Wenn ich Bilder in der Thickbox darstelle, funktioniert alles!

Es handelt sich um die Seite, welche über mein Häuschen links zu erreichen ist. Falls es wichtig ist, das Template ist eigentlich das jGruen responsive Template. Stricke gerade den kompletten Shop um...

Linkback: https://www.modified-shop.org/forum/index.php?topic=33500.0

[karsta.de]

Versuch mal in deiner .css  das:

Code: CSS  [Auswählen]

#TB_iframeContent {
    border: medium none;
    clear: both;
    height: 92% !important;
    margin-bottom: -1px;
    margin-top: 1px;
    width: 98% !important;
}

mit dem zu ersetzen:

Code: CSS  [Auswählen]

#TB_iframeContent {
    border: medium none;
    clear: both;
    height: 100%;
    margin-bottom: -1px;
    margin-top: 1px;
    width: 98% !important;
}

[sunflash]

sieht im browser korrekt aus, aber aufm handy nicht, da ist es viel zu groß, sodass man von der eigentlichen Seite gar nichts mehr sieht =(

[noRiddle (revilonetz)]

Die Thickbox ist von Haus aus was iFrames anbelangt nicht responsive.
Du kannst im Stylesheet die Werte für width und height mittels !important überschreiben.
Dies innerhalb eines Media-Queries.
Beispiel:

Code: CSS  [Auswählen]

@media(max-width:320px){
    #TB_window{width:300px !important; height:400px !important;}
}

Gruß,
noRiddle

[sunflash]

Hab mit den Größen ein wenig herumgespielt (auch %-Angaben versucht) doch hierbei ist leider nichts brauchbares rausgekommen. Im Gegenteil, die thickbox für Bilder, welche zuvor richtig auf Handys dargestellt wurde, ist nun auch in der falschen Größe.
Gibt es denn eine Alternative zur Thickbox?

[noRiddle (revilonetz)]

Deine Aussagen sind zu allgemein um daraus etwas schließen zu können.
Die Bilder-Popups der Thickbox sind responsive per Default, da mußt du irgendwo "Mist gebaut" haben.
Mein Beispiel für die iFrame-Popups funktioniert definitiv, habe ich getestet (evtl. mal Caches leeren (Browser- und Template-Cache)).

Alternativen für die Thickbox gibt's natürlich auch.
Ein Beispiel ist die Colorbox wie sie auch im 2.0 Demo-Shop eingebaut ist.

Gruß,
noRiddle

[hpzeller]

Hallo sunflash

[...]
Im Gegenteil, die thickbox für Bilder, welche zuvor richtig auf Handys dargestellt wurde, ist nun auch in der falschen Größe.
[...]

Die Ursache liegt wohl darin, dass sowohl die thickbox für Content als auch die thickbox für Bilder die id 'TB_window' nutzen und somit, wenn Du den Style von 'TB_window' änderst sich das auch auf die thickbox für Bilder auswirkt, aber selbst wenn man diesen Konflikt durch einfügen einer zusätzlichen Class löst, folgt schon das nächste Problem, das nämlich die thickbox für Content nicht mehr zentriert ist (siehe Screenshot) und bei einer Bildschirmbreite unter 340 Pixel verschwindet sie sogar teilweise. Dieses Problem könnte man zwar durch Anpassungen des JavaScripts lösen, aber da die thickbox schon ein älteres Modell ist und auch nicht mehr gepflegt wird denke ich lohnt sich der Aufwand nicht.

Alternativen zur Thickbox gibt es verschiedene, z.B. die VenoBox oder die colorbox, beide sind responsive, siehe Links.

https://github.com/nicolafranchini/VenoBox

https://github.com/jackmoore/colorbox und hier ein Forenregeln beachten! ))/shop_demo/DVD-Filme/Zeichentrick/Das-Grosse-Krabbeln.html/b/p/8/tpl/cyborg-responsive/'); return false;" class="bbc_link" target="_blank" rel="noopener" target="_blank">Beispiel

PS:
Wunderen tu ich mich aber darüber, das der Lieferant sein responsive Template mit thickbox ausliefert.

Gruss
Hanspeter

[karsta.de]

Die Thickbox funktioniert super auch responsive. Man muß nur die CSS richtig anpassen. Habe es selbst im Einsatz. Tausch mal deine komplette tickbox-css mit dieser aus (bitte vorher Backup nicht vergessen):

Code: CSS  [Auswählen]

#TB_window iframe{width:425px;max-width:100%;min-height:260px;height:100%;}
#TB_window img#TB_Image{display:block;margin:15px 0 20px 15px}
#TB_secondLine{font:12px Arial, Helvetica, sans-serif;color:#666}
#TB_window a:link{color:#666}
#TB_window a:visited{color:#666}
#TB_window a:hover{color:#000}
#TB_window a:active{color:#666}
#TB_window a:focus{color:#666}
#TB_overlay{position:fixed;z-index:100;top:0;left:0;height:100%;width:100%}
.TB_overlayMacFFBGHack{background:url(/templates/pfotex/css/macFFBgHack.png) repeat}
.TB_overlayBG{background-color:#000;filter:alpha(opacity=35);opacity:0.35}
* html #TB_overlay{position:absolute}
#TB_caption{height:25px;padding:7px 30px 10px 15px;float:left}
#TB_closeWindow{height:25px;padding:11px 15px 10px 0;float:right}
#TB_closeAjaxWindow{padding:5px 0 0 0;margin-bottom:1px;text-align:right;float:right}
#TB_closeAjaxWindow a{text-decoration:none;font-size:14px;font-family:Arial,Helvetica,sans-serif;background:#ccc;padding:3px;display:block;font-weight:bold;margin-right:10px}
#TB_closeWindow a{text-decoration:none;font-size:14px;font-family:Arial,Helvetica,sans-serif;background:#ccc;padding:3px;display:block;font-weight:bold}
#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px}
#TB_title{background-color:#657206;height:30px;color:#FFF;font-size:150%}
#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;width:94% !important;height:90% !important}
#TB_ajaxContent.TB_modal{padding:15px}
#TB_ajaxContent p{padding:5px 0 5px 0}
#TB_load{position:fixed;display:none;height:13px;width:208px;z-index:103;top:50%;left:50%;margin:-6px 0 0 -104px}
* html #TB_load{position:absolute}
#TB_HideSelect{z-index:99;position:fixed;top:0;left:0;background-color:#fff;border:none;opacity:0.0;height:100%;width:100%}
* html #TB_HideSelect{position:absolute}
#TB_next a, #TB_prev a{font-size:18px;font-family:Arial,Helvetica,sans-serif;text-decoration:none}
@media only screen and (max-width:800px){
#TB_window{font:12px Arial, Helvetica, sans-serif;font-weight:bold;position:fixed;background:#ffffff;z-index:999;color:#333333;display:none;border:0px solid #fff;text-align:left;top:1%;width:90% !important;margin-left:5% !important;margin-right:5% !important;margin-top:5% !important;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-webkit-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.65);-moz-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);}
* html #TB_window{position:absolute;}
#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;width:100% !important;height:92% !important;}
}
@media only screen and (min-width:801px){
#TB_window{font:12px Arial, Helvetica, sans-serif;font-weight:bold;position:fixed;background:#ffffff;z-index:101;color:#333333;display:none;border:0px solid #fff;text-align:left;top:50%;left:50%;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-webkit-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.65);-moz-box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);box-shadow:0px 4px 11px rgba(50, 50, 50, 0.85);display:flex;-webkit-display:flex;flex-direction:column;-webkit-flex-direction:column;}
* html #TB_window{position:absolute;}
#TB_iframeContent{clear:both;border:none;margin-bottom:5px;margin-top:1px;}
}
 

[noRiddle (revilonetz)]

Hallo sunflash

[...]
Im Gegenteil, die thickbox für Bilder, welche zuvor richtig auf Handys dargestellt wurde, ist nun auch in der falschen Größe.
[...]

Die Ursache liegt wohl darin, dass sowohl die thickbox für Content als auch die thickbox für Bilder die id 'TB_window' nutzen und somit, wenn Du den Style von 'TB_window' änderst sich das auch auf die thickbox für Bilder auswirkt, ...

Natürlich, ich Idiii..., man sollte auch richtig testen

@kgd
Kann man das mal irgendwo sehen ?
Ich habe inzwischen auch so meine Zweifel, habe momentan nur nicht die Zeit es zu testen...
(Ich werde demnächst meine "Thickbox animiert" neu überarbeiten und responsive machen.
Ich finde die Simplizität der Thickbox immer noch genial, vor allem weil es keine Grafiken gibt um sie zusammenzubauen, ist alles mit CSS stylebar.)

Gruß,
noRiddle

[hpzeller]

Hallo kgd

Stimmt, mit deinem CSS geht es sehr gut, Bravo!

Gruss
Hanspeter

[karsta.de]

@noRiddle
Mit sehen ist das so'ne Sache. Ist in meinem geschützten Bereichen (baue den Shop da responive, fast ausschließlich mit css), aber auf meiner eigenen Seite nutze ich das auch.

[sunflash]

@kgd: Vielen Dank für deine CSS, damit wird die thickbox in der richtigen Größe dargestellt.
Jetzt wird natürlich nur noch das Iframe darin größer dargestellt, aber das ist ne andere Baustelle. Aber vielleicht schwenke ich wirklich auf die colorbox oder die venobox um, muss ich die nächsten Tage nochmal testen. Weiß nur noch nicht auf welche =)

Der Lieferant ist ja in dem Fall smilingshops und da bin ich eigentlich ganz froh, dass die ein responsive umsonst anbieten. War natürlich ne CSS-Schlacht um den Shop wie meinen alten aussehen zu lassen (und das war mein erstes responsive-projekt). Ich denke ich bin auf einem ganz guten Weg und es wird langsam.

[karsta.de]

Jetzt wird natürlich nur noch das Iframe darin größer dargestellt, aber das ist ne andere Baustelle.

Der Iframe wird nur so groß angezeigt, weil du keine css-Anpassung für die entsprechenden Content-Seiten gemacht hast. Heißt der Inhalt beispielsweise der Maßanleitung muß so angepasst werden, dass die großen Bilder bei kleinerem Bildschirm sich automatisch an die Bildschirmgröße anpassen. (Bei unsere Farben hast du es gemacht, bei der Maßanleitung nicht.)
Hat nichts mit der Thickbox zu tun.

LG kgd