JS-Galerie mit variabler Bildgröße??

[klixx]

Hallo,
denke nicht, dass es da etwas 'fertiges' gibt, aber im Rahmen eines Projekts ist der Wunsch entstanden, Fotos abhängig von der Bildschirmauflösung in geeigneter Bildgröße anzuzeigen... also quasi wie bei den Galerien, die es schon auf die Browsergröße gezoomt gibt (Name fällt mir gerade nicht ein, jQuery-Plugin, glaub ich), aber eben nicht fullscreen, sondern im Layout (das in dem Fall minimalistisch und flexibel ist)... Weiß leider nicht, ob so richtig klar wird was ich meine - also z.B. großes Bild 60% der Browsergöße - darunter Thumbnails (Slideshow2 o.ä.) .
Oder eben per Hand umsetzen (Ideen??), aber das stell ich mir nicht so trivial vor, vor allem wenn eine bestehende Slideshow/Galerie wie z.B. Slideshow2 mit weichen Übergängen verwendet wird!?!

Gruß und danke für Ideen..

[klixx]

hmm, da noch keine Reaktionen kamen, denk ich mal, dass es da wirklich nichts Fertiges gibt... An sich müsste man wohl das Browserfenster per JS auslesen und dann die Galerie(/Bildgröße) entsprechend prozentual anpassen... aber spätestens bei 'mobilen Endgeräten' (wie es neudeutsch so schön heißt) habe ich da ziemlich Bammel. Wobei die Slideshow2 bei mir auf dem Smartphone in 3 versch. Browsern auch 3 verschiedene 'Ausdrucksweisen' darbietet... Alles nicht ganz trival.

[mindraper]

hi klixx.

noch nicht ausgetestet, aber eine möglichkeit wäre wohl, die bildgrößen in einem array oder einem object, mit hilfe der höhe und breite des browserfensters im verhältnis anzupassen, zu speichern und abhängig von der position des aktiven bildes die größen aus dem array auszulesen. damit könntest du den viewport der galerie dann in der größe anpassen ( wie gesagt, noch nicht getestet ). natürlich bräuchtest du dann eine zusätzliche variable mit startwert 0 ( zahl null ), die du beim springen auf das nächste / vorherige bild in- bzw. dekrementierst. die variable dient als referenz zur aktuellen position innerhalb der bildliste.

die art der überblendung sollte dabei eigentlich keine rolle spielen.

gruß

[anste14]

hallo klixx,

wie mindraper schon schreibt, kannst du die originalgrößen der bilder in einem array speichern und daraus die gewünschte größe berechnen. wenn das zu viel arbeit macht, liest du die größen per php aus und berechnest sie dann entsprechend der gewünschten ausgabe. abhängig vom browser bzw. ausgabegerät kannst du ja verschiedene berechnungen ausführen.

vg

[klixx]

Danke für Eure Antworten! Werde mir das mal durch den Kopf gehen lassen / mich daran versuchen.
Habe mittlerweile aber auch bestehende Ansätze mit image-resizing gefunden und versuche mich an deren Anpassung. Ist bloß wieder viel Arbeit und zeitfressend, aber auch lehrreich. Bin nicht unbedingt Spezi in sowas...

[klixx]

Hallo, möchte das gerne nochmal aufwärmen...: ich habe es jetzt ganz gut hinbekommen, die Galerie (in meinem Fall wirklich die Slideshow2 (mootools) abhängig von der Browserfenstergröße ausgeben zu lassen - allerdings ist das Ganze nicht dynamisch, d.h. bei einem window resize passiert nichts (ich lese einfach die Fenstergröße aus und gebe dann einen relativen Wert für die Größe an - bei der Galerie ist es so, dass die Größe beim Instanzieren angegeben wird).
Die Slideshow2 wird (wie es Standard ist) mit mit document ready function (oder so ähnlich) instanziiert (und reagiert daher nicht auf nachträgliche Änderungen). Wie bekomme ich nun den window resize event da rein?? Muss ich den dann (zwigend) in die eigentliche Klasse integrieren? Habe mir zwar schon lange vorgenommen, mich mit mootools(js-allgemein)-Klassen zu beschäftigen, aber bin da noch nicht weit genug fortgeschritten!! Danke für Hinweise und Gruß!

[mindraper]

hi.

du brauchst eine function, die via eventlistener aus das window Object gepatcht ist und bei dem event "onresize" aufgerufen wird. diese schaut sich dann einmal die aktuelle fenstergröße an ( sprich: du liest jedesmal auf's neue die breite / höhe des fensters aus und passt das angezeigte bild an. interessant wäre allerdings, wie das bild momentan skaliert wird ( rein css? größenangaben in px / % / em? usw. ). kurzum: poste bitte mal einen link, unter dem man sich den code ansehen kann.

generell kann man eine function entweder so auf das onresize-event patchen ( event-level 1 ):

PHP-Code:

// die function selbst
function doOnResize(){
   var maxWidth = window.innerWidth || document.documentElement.offsetWidth,
         maxHeight = window.innerHeight || document.documentElement.offsetHeight;

__DEIN_BILD_ELEMENT__.style.width = (( maxWidth - 20 ) + 'px' );
__DEIN_BILD_ELEMENT__.style.height = (( maxHeight - 20 ) + 'px' );
};

// die function registrieren
window.onresize = doOnResize; 


oder event-level 2 konform:

PHP-Code:

// die function selbst
function doOnResize(){
   var maxWidth = window.innerWidth || document.documentElement.offsetWidth,
         maxHeight = window.innerHeight || document.documentElement.offsetHeight;

__DEIN_BILD_ELEMENT__.style.width = (( maxWidth - 20 ) + 'px' );
__DEIN_BILD_ELEMENT__.style.height = (( maxHeight - 20 ) + 'px' );
};

// helper-function fuer eventlistener
function registerEvent( element, eventtype, handler, cancancel ){
   var wrapperFn, evt;

   if( window.addEventListener ){
       // eventregistration ff, o, chrome, safari, ie 9+
       element.addEventListener( eventtype, handler, cancancel || true );
   } else {
       // wrapper-function mit ( minimal ) normalisiertem event-object für ie < 9
       wrapperFn = function( event ){
          if( !event ){
             event = window.event;
          }
          evt = {
             type : event.type,
             target : event.srcElement,
             preventDefault : function(){ event.returnValue = false; },
             stopPropagation : function(){ event.cancelBubble = true; }
          };

          handler.call( this, evt );
      }
      // registration für ie < 9
      element.attachEvent( 'on' + eventtype, wrapperFn );
   }
};

// die function registrieren
registerEvent( window, 'resize', doOnResize ); 


ich bin mir allerdings sicher, dass mootools eine eigene methode hat, um eventlistener zu registrieren. nur wie die ausschaut kann ich dir nicht sagen, weil ich mootools nie nutze ( dojo & jquery sind m. e. nach einfach besser, kein augmenting von nativen objects u. ä. eben ). ich meine aber mich zu erinnern, dass es da eine methode namens addEvent gab oder so.

prinzipiell ist das auch vollkommen egal, es bleibt dabei, dass du einen eventlistener auf das window object registrierst der immer bei "onresize" eine function aufruft.

hoffe das hilft.

[KireSchattenhaar]

Du könntest einfach in Abständen immer wieder die Browsergröße auslesen. Bei JS wird ja normalerweise immer beim Load das einmal ausgeführt und dann ist gut. Was Du nach dem Load der Seite machst, ist dann nicht mehr relevant.

[mindraper]

hi.

das würde aber nicht mehr dazu führen, dass das bild in der größe geändert wird, wenn es gerade geladen wurde und der user das fenster verkleinert / -größert ohne ein neues bild zu laden.
es sei denn, die skalierung erfolgt via css.

wie dem auch sei, wir werden es erst wissen, wenn man etwas code zu sehen bekommt

[klixx]

Hallo und danke schonmal für Eure Mühe!
Die resize() Funktion ist nicht das eigentliche Problem, dafür gibt es einiges zu finden und mootools hat das glaube ich wirklich bereits drin.
Bloß verwende ich ja mit der Galerie eine fertige Klasse und die wird eben einmal bei window ready 'bemüht' und ist danach quasi eine 'black box' - ich kann dann nicht mit einer externen Funktion darauf einwirken, da die Klasse selbst eben diese resize Funktion nicht besitzt! Ich müsste dann in der resize-Funktion quasi den window ready event modifizieren können, aber das macht ja keinen Sinn.
Daher meine Frage, ob ich die zwingend direkt in die Klasse integrieren muss. Ist also eher ein js-OOP-Problem / Frage dazu als zum resizing an sich...

Oder hab ich da jetzt nen Denkfehler?!

<script type="text/javascript">
  window.addEvent('domready', function(){
    new Slideshow('keylin', ['1.jpg', '2.jpg', '3.jpg'], {height: 300, hu: 'keylin/', width: 400});
});
</script>

So wird eine Slideshow erstellt - Breite und Höhe bestimme ich dabei dynamisch per JS.

[mindraper]

hi.

jain du müsstest natürlich nicht die domready methode ändern. die gibt es ja in mootools so eh nicht, das sieht aus als ob bei mootools ein custom-event gefeuert wird, sobald das dom geladen ist.

was du allerdings modifizieren müsstest, ist das prototype-object von Slideshow(). dort drinne müsste eine function implementiert werden, die die slideshow anpasst in höhe und breite.
in einem "zweiten" schritt müsste dann, wie ich schon sagte, ein eventlistener auf das resize-event des browserfensters ( sprich: das window-object ) registriert werden, der die resize-function von Slideshow aufruft.

rein theoretisch sowas:

PHP-Code:

window.addEvent( 'domready', function(){

var myShow = new Slideshow( 'foo', [ img1.jpg, img1.jpg ], { height: 300 });

window.addEvent( 'resize', function(){
      myShow.doOnResize();
});

}); 


wie gesagt, das ginge natürlich erst, wenn du dem prototype-object bzw. dem mit dem new-operator neu erzeugten Slideshow-object eine entsprechende methode verpasst.

hoffe das hilft

[klixx]

Zitat von mindraper

wie gesagt, das ginge natürlich erst, wenn du dem prototype-object bzw. dem mit dem new-operator neu erzeugten Slideshow-object eine entsprechende methode verpasst.

auch jein...
die Methode muss dann doch in die Klasse integriert werden!!?!
Und das ist eben ziemlich besch..., da ich die nicht wirklich verstehe.
Aber ich werds versuchen.
Gruß und danke.

[mindraper]

Zitat von klixx

auch jein...
die Methode muss dann doch in die Klasse integriert werden!!?!

javascript ist nicht klassenbasiert. oop in js funktioniert via prototypen. sofern ich mich richtig an mootools erinnere, steht im plugin code irgendwo new Class().
damit passiert "hinter den kulissen" die arbeit am prototype-object. aber es wird definitiv daran passieren.

instanziere doch einfach mal in deinem code eine neue box und lass das object an eine variable zurückgeben. also

var myShow = new Slideshow();

console.log( myShow );

dann machst du die seite im ff auf ( mit installiertem firebug ), gehst auf console und guckst mal was drinne steht. evtl. die seite mal refreshen.

wenn dann in dem angezeigten object irgendwo __proto__ steht, ist das das prototype-object. und ich wette dass es drinne steht.