Hey ihr lieben,
ich bin seit zwei-drei Tagen auf der Suche nach ner Lösung für folgendes Problem:
Ich habe eine Slideshow (die hier:
http://rhinoslider.com/demo-download/ ) in meine PHP-Seite eingebunden und habe Sie nun nach meinen Wünschen verändert.
Wie ihr sehen könnt stehen bei dem Rhinoslider unterschiedliche Effektmöglichkeiten zur Verfügung. (Da kommt dann mein Problem zum Einsatz)
Ich habe mit diesen Befehlen:
@media screen and (max-width: 950px) {}
@media screen and (min-width: 950px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1400px) {}
in meinem CSS meiner Seite gesagt, wie Sie sich Proportional anpassen soll, was auch gut funktioniert...allerdings merkte ich recht schnell, dass dies für die Slideshow doch etwas komplizierter wurde, da ja hier einiges an Javascriptcode mit einfließt (ich kenne mich extrem schlecht mit Javascript aus, ich wende es an soweit mir möglich ist, aber es zu verstehen ist eine andere Geschichte^^)
Nun: Die Div-Tags der Slideshow lassen sich Proportional mit Hilfe des CSS beeinflussen:
Beispiel:
@media screen and (min-width: 1400px) {
.rhino-container {
width:900px !important;
height:350px !important;
background-color:none;
/*IE bugfix*/
padding:0;
margin-left:0;
}
#page_image {
width:910px !important;
height:auto !important;
background-color:none;
padding-left:50px;
padding-right:40px;
}
#slider {
width:900px !important;
height:350px !important;
background-color:none;
}
#slider img {
width:748px;
height:300px;
padding-left:0px;
border-bottom:1px solid grey;
}
#allg_Text{
padding-left:0px;
}
}
Jetzt habe ich mein Fenster mit Fullscreen geöffnet, die Slideshow läuft ganz normal mit richtigem Slide-Effekt, alles Top!
ich ziehe das Bild kleiner...selbes Spiel --> alles Top!
...wenn ich meine Seite in nem kleinen Fenster öffne (nicht Fullscreen) und danach maximiere wird das Image nicht mehr vollständig dargestellt?! Jetzt dacht ich natürlich ich machs mir einfach und maximiere mein Bild mit:
/*.rhino-item {
width:100% !important;
height:100% !important;
}*/
was auch funktioniert..ich bekomme mein Bild vollständig angezeigt, AAABER die Slidefunktion ist kaputt, eine andere Slidefunktion wird durchgeführt ohne dass ich das beeinflussen wollte
Ich nehme an dass der Javacode die Änderung für das CSS nicht akzeptiert bzw. falsch überschreibt,
heißt wenn ich z.B. eine Größe von width:500px; height:201px; für mein Image habe während mein Fenster nicht bei voller Größe ist, dann meinen Bildschirm größer ziehe damit mein Image die Maße width:748px; height:300px; bekommt, dann arbeitet das CSS durch aber das Javascript hat die festen Maße von width:500px; height:201px immernoch im Speicher,
diese überschreibe ich ja mit width:100% !important; height:100% !important; und mein Programm weiß nix mehr damit anzufangen....
Ohje jetzt habe ich einen halben Roman geschrieben, ich hoffe das war so ausführlich genug und ihr könnt mir weiterhelfen...falls jemand Vorschläge hat wo ich Tipps oder sonstiges für so ein Problem finde gerne her damit...ich googel seit Tagen ohne Erfolg
Vielen lieben Dank im Voraus
Raydon