shadowbox beeinflussen

[torsten]

moin!

neues problem, neues glück?

ich betreibe eine seite voller fotografien und benutze zur präsentation die shadowbox welche mit einem einfachen setup u.a. drei möglichkeiten der präsentation bietet.

durch eine funktion handleOversize wird der wert "none", "resize" (=default) und "drag" übergeben. in erstem fall wird das bild beschnitten falls der viewport zu klein dafür ist, die zweite variante ist selbsertklärend, das bild wird also in der größe angepasst und die dritte option sorgt dafür, dass man das bild mit der maus greifen und innerhalb des zu kleinen viewports verschieben kann. diese eine festgelegte einstellung gilt für alle bilder die von dem script bedient werden gleichermaßen, es kann nur eine der optionen ausgewählt werden.

was mir vorschwebt habe ich bei kenem einzigen lightbox-derivat gesehen, ich würde gern das eine oder andere set mit der option "drag" darstellen anstatt dem default "resize"

oder bzw. und

ich möchte gern in einem set bilder welches per default "resize"d wird das eine oder andere bild als "drag"able präsentieren.

ich vermute vage, dass man in einen link ein onLoad=... (hier folgt ein tolles javascript) einfügen kann, dass dann die option per vorher definierter funktion überschreibt...

hört sich furchtbar schlau an, bin ich aber nicht... js ist das sprichwörtliche buch mmit sieben siegeln für mich deswegen hoffe ich jemand kann helfen.

danke :)

mfg torsten

[ChrisB]

Hi,

was mir vorschwebt habe ich bei kenem einzigen lightbox-derivat gesehen, ich würde gern das eine oder andere set mit der option "drag" darstellen anstatt dem default "resize"

oder bzw. und

ich möchte gern in einem set bilder welches per default "resize"d wird das eine oder andere bild als "drag"able präsentieren.

ich vermute vage, dass man in einen link ein onLoad=... (hier folgt ein tolles javascript) einfügen kann, dass dann die option per vorher definierter funktion überschreibt...

Nein, nicht ganz.

Du kannst aber Shadowbox.setup nutzen, um die ShadowBox „manuell“ für bestimmte Links zu aktivieren, und dabei die gewünschten Optionen mitgeben, wie es unter http://www.shadowbox-js.com/usage.html#advanced beschrieben ist.

Am simpelsten wäre es also, wenn du dafür deinen Links je nachdem, welches Verhalten die Shadowbox für den jeweiligen „Typ“ zeigen soll, unterschiedliche Klassen vergibst - bspw. "shadowbox-resize", "shadowbox-drag" - und dann für die Links jeder dieser Klassen einzeln „aufsetzt“, in dem du mehrere Aufrufe von Shadowbox.setup machst, mit der jeweiligen Klasse im Selektor und einem Options-Objekt nach deinen Wünschen.

MfG ChrisB

[torsten]

moin!

danke erst mal für die verflucht schnelle antwort... aber

Nein, nicht ganz.

ich habs geahnt, wenn jemand wie du "nicht ganz" schreibt, wieviel bin ich dann wohl daneben?

Du kannst aber Shadowbox.setup nutzen, um die ShadowBox „manuell“ für bestimmte Links zu aktivieren, und dabei die gewünschten Optionen mitgeben, wie es unter http://www.shadowbox-js.com/usage.html#advanced beschrieben ist.

Am simpelsten wäre es also, wenn du dafür deinen Links je nachdem, welches Verhalten die Shadowbox für den jeweiligen „Typ“ zeigen soll, unterschiedliche Klassen vergibst - bspw. "shadowbox-resize", "shadowbox-drag" - und dann für die Links jeder dieser Klassen einzeln „aufsetzt“, in dem du mehrere Aufrufe von Shadowbox.setup machst, mit der jeweiligen Klasse im Selektor und einem Options-Objekt nach deinen Wünschen.

mit klassen meinst du css klassen? ne gelle? aber wie ich was "aufsetze" weiß ich leider nicht... eine gute fee hat mir das hier geschenkt:

  
HEAD Section  
  
     <script type="text/javascript">  // Function ShadowboxRun for Shadowbox.open  
  
          var ShadowboxRun = function(SBContent, SBPlayer, SBTitle, SBWidth, SBHeight, SBOptions){  
                Shadowbox.open({  
                        content: SBContent,  
                         player: SBPlayer,  
                           type: SBPlayer,  
                          title: SBTitle,  
                          width: SBWidth,  
                         height: SBHeight,  
                        options: SBOptions  
                });  
          };  
  
     </script>  
  
  
BODY Section  
  
<a href='javascript:ShadowboxRun("path/Image.jpg", "img", "Title of Image", "640", "480", {modal:false, handleOversize:"drag"});'>Click THIS LINK when browser is SMALLER than image size</a>

aber leider mache ich damit die barrierefreiheit meiner seite kaputt sofern man bei der drastellung von bildern überhaupt davon sprechen kann, weil diese links ohne js wohl kaum funktionieren... außerdem möchte ich parameter wie höhe/ player/ weite/ inhalt etc. nicht per javascript verwurschteln. für meinen schnöden geist müsste das irgendwie anders aussehen... das würde idealer weise umgebastelt werden, so dass nur noch die option "options" mit handleOversize:"drag" über bleibt...

ist evtl. jetzt irgend ein fünkchen brauchbar?

mfg torsten

[ChrisB]

Hi,

mit klassen meinst du css klassen? ne gelle?

Nein, weil es sowas nicht gibt.
Ich rede vom class-Attribut, welches du den Links im HTML gibst.

aber wie ich was "aufsetze" weiß ich leider nicht... eine gute fee hat mir das hier geschenkt

Die gute Doku-Fee hat dir doch eine recht ausführliche Dokumentation zu dem Script, das du einsetzt, geschenkt. Also enttäusche die Fee bitte nicht, und beschäftige dich mit der Doku.

MfG ChrisB

[torsten]

moin!

ich ahne was du mir sagen willst, aber weisst du was der hund versteht wenn sein herrchen über die aktuelle weltwirtschaft redet?

ich auch nicht ;-)

ich schau mir den krempel morgen nochmal an und versuche zusammenhängende zusammenhänge zu finden.

danke vorerst

mfg torsten

[torsten]

moin!

ich habe die doku so aufmerksam wie möglich gelesen und mir dann folgendes zusammen gebastelt:

einen link habe ich mit <a class="resize" id="berl" href="usw."... gekennzeichnet und einen mit <a class="drag" id="berl" href="usf."... gekennzeichnet, dann hab ich folgendes javascript zum initialisieren in den head bereich gekritzelt:

<script type="text/javascript">  
Shadowbox.init({  
    skipSetup: true  
});  
  
window.onload = function() {  
  
    // set up all anchor elements with a "drag" class to work with Shadowbox  
    Shadowbox.setup("a.drag", {  
		handleOversize: "drag",  
		continuous: true,  
		counterType: "skip",  
		counterLimit: 19,  
		overlayColor: "#fff",  
		overlayOpacity: 0.7  
    });  
    // set up all anchor elements with a "resize" class to work with Shadowbox  
    Shadowbox.setup("a.resize", {  
		handleOversize: "resize",  
		continuous: true,  
		counterType: "skip",  
		counterLimit: 19,  
		overlayColor: "#fff",  
		overlayOpacity: 0.7  
    });  
  
};  
</script>

und siehe da, ich bin genau da wo ich vorher nicht war, denn die shadowbox wird nun überhaupt nicht geladen...

:(

im prinzip hab ich doch nur die doku kopiert und die namen geändert, aber wohl irgendwas vergessen... aber was?

mfg torsten

[torsten]

moin!

wie peinlich, ich hatte die shadowbox ohne CSS support geladen... jetzt geht's

mfg torsten