Antworten auf deine Fragen:
Neues Thema erstellen

jQuery Cycle Plugin - noconflict

S

SGAMaddin

Nicht mehr ganz neu hier

Hi,
ich will auf meiner Seite das jQuery Cycle Plugin mit einer Lightbox verwenden. Beide verwenden $ daher brauche ich noConflict. Ich habe daher folgende Methode angewand.
Code: 
$.noConflict();
jQuery(document).ready(function($) {
und meine $ in meinem jQuery-Code mit jQuery ersetzt. So sah am Anfang; auch gut aus Lightbox funktionierte jQuery funktionierte bis auf einige meiner Funktionen.
Hier mal das ganze Skript:
Code: 
$.noConflict();
jQuery(document).ready(function($) {

$(document).ready(function() {
$('#slideshow').cycle({
 fx: 'fade',
 speed: 1000,
 timeout: 4000,
 next:   '.next',
 prev:   '.prev', 
 before:  onBefore, 
 after:   onAfter, 
});
});


document.getElementById('g_play').style.display=none;

function setSlide(index) { $('#slideshow').cycle(index);}

function pause_g () { $('#slideshow').cycle('pause');}

function resume_g() { $('#slideshow').cycle('resume');}

function onBefore(curr, next, opts) { var img_name = "\"" + this.alt + "\""; $('#output').html(img_name); } 
    
    document.getElementById('download_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_save.png);'></div>"
    document.getElementById('download_b').href= "\"" + img_id + "\""
    document.getElementById('download_b').target="_blank"
    
    document.getElementById('full_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_screen.png);'></div>"
    document.getElementById('full_b').href=img_id_big 
    document.getElementById('full_b').rel="lightbox"    
    
function onAfter(curr, next, opts)  {  var img_name = "\"" + this.alt + "\""; $('#output').html(img_name); var img_id = "\/img\/gallery\/b1_"+ opts.currSlide+".jpg";var img_id_big = "\/img\/gallery\/big\/b1_"+ opts.currSlide+".jpg"; var img_cur = opts.currSlide; 
if (opts.currSlide !== 100) {javascript:document.getElementById('aktive_cycle').style.left= opts.currSlide*22+113 +"px"; }
if (opts.currSlide !== 100) {
    document.getElementById('download_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_save.png);'></div>"
    document.getElementById('download_b').href= img_id 
    document.getElementById('download_b').target="_blank"    
    
    document.getElementById('full_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_screen.png);'></div>"
    document.getElementById('full_b').href=img_id_big 
    document.getElementById('full_b').target="_blank"
    if (img_cur == 0){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2008<font class='grey'>, original resolution </font>2000px*1050px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/art/Real-Air-Force-96580728' target='_blank'>[link]</a>"}    
    if (img_cur == 1){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>2000px*1125px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/#/d2pnzd1' target='_blank'>[link]</a>"}
    if (img_cur == 2){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>2300px*1036px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/#/d2ulrc3' target='_blank'>[link]</a>"}    
    if (img_cur == 3){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>1920px*1080px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/#/d322ypo' target='_blank'>[link]</a>"}    
    if (img_cur == 4){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>2880px*1620px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/#/d2m0lbm' target='_blank'>[link]</a>"}    
    if (img_cur == 5){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>1291px*2010px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/#/d2m0kj4' target='_blank'>[link]</a>"}    
    if (img_cur == 6){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2008<font class='grey'>, original resolution </font>4400px*2112px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1rpqst' target='_blank'>[link]</a>"}    
    if (img_cur == 7){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2008<font class='grey'>, original resolution </font>1600px*800px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1qi2gz' target='_blank'>[link]</a>"}    
    if (img_cur == 8){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>1920px*1440px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d2bg3id' target='_blank'>[link]</a>"}    
    if (img_cur == 9){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>2000px*800px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1xfmid' target='_blank'>[link]</a>"}    
    if (img_cur == 10){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>2500px*1000px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/7766234#/d25yqcj' target='_blank'>[link]</a>"}    
    if (img_cur == 11){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>1600px*2500px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/7766234#/d21g6rs' target='_blank'>[link]</a>"}    
    if (img_cur == 12){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>3000px*1400px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d2a7rkp' target='_blank'>[link]</a>"}    
    if (img_cur == 13){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2008<font class='grey'>, original resolution </font>2000px*1050px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1kkuic' target='_blank'>[link]</a>"}    
    if (img_cur == 14){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>1600px*900px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1yt2nz' target='_blank'>[link]</a>"}    
    if (img_cur == 15){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2010<font class='grey'>, original resolution </font>2000px*2000px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=0#/d2rm4t5' target='_blank'>[link]</a>"}    
    if (img_cur == 16){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>2200px*1056px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d1trqma' target='_blank'>[link]</a>"}    
    if (img_cur == 17){document.getElementById('g_info_container').innerHTML= "<font class='grey'>by Martin Steil</font> 2009<font class='grey'>, original resolution </font>4000px*1600px<font class='grey'>, deviantart </font><a class='simple' href='http://sga-maddin.deviantart.com/gallery/?offset=24#/d2508iz' target='_blank'>[link]</a>"}        
                                    }                            
                                     }


function container_pic_1() { javascript:document.getElementById('prev_container').style.display= "none"; }

function hover_dot_a (index) {
    var current_dot = "n_" + index 
    var index18 = "javascript:setSlide(" +index+")"
    var index_bg = index
    document.getElementById(current_dot).style.backgroundPosition="0 22";
    document.getElementById('prev_container').style.left= index*22+59 +"px";
    document.getElementById('prev_container').style.display= "block";
    document.getElementById('prev_link18').href= index18
                             }

function out_dot_a (index)   {
    var current_dot = "n_" + index 
    document.getElementById(current_dot).style.backgroundPosition="0 22px";
                              } 
});
folgende Funktionen stellen ihren Dienst ein:
die Funktionen in der liste "navigation", pause_g sowie resume_g.
Hat jemand eine Idee woran das liegen kann oder noch besser wie ich das beheben kann??
 
Zuletzt bearbeitet:

Robbyn-

Robbyn-

PHP / Flex Programmierer

AW: jQuery Cycle Plugin - noconflict

Versuche mal die Funktionen anders zu sortieren. Bei mir war das mal so das die falsche reihenfolge ein problem mit der Ausführung verursacht hat.
 
S

SGAMaddin

Nicht mehr ganz neu hier

AW: jQuery Cycle Plugin - noconflict

Wie genau meinst du das?? welche Funktionen soll ich wie anordnen? Ich habs jetzt einige hoch und runter verschoben hat sich aber nichts getan. Ich finde das so wieso sehr komisch das da manche funktionen gehen und andere nicht, vorallem, da zum Teil ja Funktionen betroffen sind, die mit dem jQuery $ Kram nichts zu tun haben, wie z.B die getElementbyId teile....
 
Robbyn-

Robbyn-

PHP / Flex Programmierer

AW: jQuery Cycle Plugin - noconflict

Nur mal so eine Frage müsste dein noConflict befehl nicht so aussehen

PHP: 
<script type="text/javascript">
	jQuery.noConflict();
</script>

denn so wie du das stehen hast denke ich mal will er alle $ durch jQuery ersetzen.
 
S

SGAMaddin

Nicht mehr ganz neu hier

AW: jQuery Cycle Plugin - noconflict

Also ich habs jetzt hinbekommen mit der x-ten Variante:
Code: 
var $$ = jQuery.noConflict();
<!---code mit $$ anstatt nur $ --->
$$("div p").hide();
Du hattest Recht. Vielen Dank für deine Mühe! Jetzt klappt die Lightbox mit der Slideshow.
 
sokie

sokie

Mod | Web

AW: jQuery Cycle Plugin - noconflict

Das Problem mit noConflict ist kaum nachzuvollziehen, wenn du eine jQuery Lightbox und jQuery Cycle verwendest gibts keinen Konflikt. Konflikte entstehen, wenn man verschiedene Frameworks, wie zB Mootools und jQuery verwendet, weil in beiden das "$" benutzt wird.
rtfm: http://api.jquery.com/jQuery.noConflict/
If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():
Zum Vergrößern anklicken....
wenn du im Headbereich so etwas notierst:
Code: 
document.getElementById('g_play').style.display=none;
wird das natürlich ausgeführt bevor der Rest der Seite geladen ist, was dann zur Folge hat, dass das Element #g_play noch gar nicht existiert und entsprechend nicht manipuliert werden kann.
das könntest du entweder per
Code: 
window.onload = function(){
document.getElementById('g_play').style.display=none;
}
auf den Zeitpunkt verlagern, wo die Seite geladen ist, oder noch viel simpler in den Block setzen wo jQuery ohnehein das $(document).ready() Event erwartet.

dort dann auch einfacher:
Code: 
$("#g_play").hide();
//oder
$("#g_play").css("display","none");

ps. wenn du eine andere Lightbox als die verwendest, solltest du das vielleicht einfach ändern.
 
Zuletzt bearbeitet:
S

SGAMaddin

Nicht mehr ganz neu hier

AW: jQuery Cycle Plugin - noconflict

Das habe ich auch schon versucht gehabt:
Code: 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Wenn ich die lade und dann die lightbox aufrufen will dann öffnet er das Bild nur in einem neuen Fenster...
 
S

SGAMaddin

Nicht mehr ganz neu hier

AW: jQuery Cycle Plugin - noconflict

Ich hab aber mit noConflict die Lightbox 2 zum laufen bekommen nur habe ich mit der auch ein Problem: Die Bilder die ich laden will haben eine Auflösung von bis zu 1800px Breite. Daher wird der Lightboxcontainer auch auf die Größe gesetzt. Ich will aber das die Box nur ca 80% der Bildschirmbreite einnimmt und die höhe dann entsprechend der 80% ans jeweilige Bild angepasst wird. Nur ich hab keine Ahnung was ich da im code änder muss.
Ich verwende momentan diese hier:
 
Robbyn-

Robbyn-

PHP / Flex Programmierer

AW: jQuery Cycle Plugin - noconflict

In der Datei lightbox.js in der Zeile 209 wo das steht:

PHP: 
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

wird die größe der Bilder festgelegt. Die größe bezieht er aus der Datei. Versuche hier mal ein max-width und max-height festzulegen also die maximale größe eines bildes.

MfG.Robbyn
 
sokie

sokie

Mod | Web

AW: jQuery Cycle Plugin - noconflict

SGAMaddin schrieb:
Die Bilder die ich laden will haben eine Auflösung von bis zu 1800px Breite.
Zum Vergrößern anklicken....
so grosse Bilder zu laden ist ziemlich sinnfrei.
du solltest dich gerade bei bildern entscheiden wie gross sie dargestellt werden sollen, und sie in der Grafiksoftware so bearbeiten, dass sie ein etwas einheitliches Mass haben (und das zudem noch auf dem Rechner deiner Zielgruppe auf jeden Fall ohne zu scrollen angezeigt werden). Bilder verlieren an Qualität, wenn man sie im Browser skaliert (ein no-go). zudem verkürzt du so Ladezeiten, und schränkst zudem das Risiko ein, dass man sich an deinen Arbeiten "vergreift".

Der Hinweis die zu benutzen kam nicht von ungefähr, denn die von dir verwendetete benutzt das prototype- und scriptacoulo-Framework. Da Du ja die jQuery Cycle nutzen willst, drängt es sich nahezu auf auch die jQuery Lightbox zu benutzen, um dem "Conflict" von vornherein aus dem Weg zu gehen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 159 (Mitglieder: 5, Gäste: 154)
Robots: 842

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben