Forum

jQuery Cycle Plugin - noconflict

Erstellt von SGAMaddin, 30.01.2011.



  1. SGAMaddin

    SGAMaddin Nicht mehr ganz neu hier

    Dabei seit:
    15.06.2008
    Beiträge:
    70
    Geschlecht:
    männlich
    Software:
    Cinema 4d R12, ZBrush3, Vue, Apophysis, Photshop, Dreamweaver, AfterEffects, Flash
    jQuery Cycle Plugin - noconflict
    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 (Text):
    1. $.noConflict();
    2. jQuery(document).ready(function($) {
    3.  
    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 (Text):
    1. $.noConflict();
    2. jQuery(document).ready(function($) {
    3.  
    4. $(document).ready(function() {
    5. $('#slideshow').cycle({
    6.  fx: 'fade',
    7.  speed: 1000,
    8.  timeout: 4000,
    9.  next:   '.next',
    10.  prev:   '.prev',
    11.  before:  onBefore,
    12.  after:   onAfter,
    13. });
    14. });
    15.  
    16.  
    17. document.getElementById('g_play').style.display=none;
    18.  
    19. function setSlide(index) { $('#slideshow').cycle(index);}
    20.  
    21. function pause_g () { $('#slideshow').cycle('pause');}
    22.  
    23. function resume_g() { $('#slideshow').cycle('resume');}
    24.  
    25. function onBefore(curr, next, opts) { var img_name = "\"" + this.alt + "\""; $('#output').html(img_name); }
    26.    
    27.     document.getElementById('download_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_save.png);'></div>"
    28.     document.getElementById('download_b').href= "\"" + img_id + "\""
    29.     document.getElementById('download_b').target="_blank"
    30.    
    31.     document.getElementById('full_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_screen.png);'></div>"
    32.     document.getElementById('full_b').href=img_id_big
    33.     document.getElementById('full_b').rel="lightbox"    
    34.    
    35. 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;
    36. if (opts.currSlide !== 100) {javascript:document.getElementById('aktive_cycle').style.left= opts.currSlide*22+113 +"px"; }
    37. if (opts.currSlide !== 100) {
    38.     document.getElementById('download_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_save.png);'></div>"
    39.     document.getElementById('download_b').href= img_id
    40.     document.getElementById('download_b').target="_blank"    
    41.    
    42.     document.getElementById('full_b').innerHTML="<div style='height:18px; width:18px; background-image:url(img/menue/gallery_menue_screen.png);'></div>"
    43.     document.getElementById('full_b').href=img_id_big
    44.     document.getElementById('full_b').target="_blank"
    45.     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>"}    
    46.     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>"}
    47.     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>"}    
    48.     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>"}    
    49.     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>"}    
    50.     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>"}    
    51.     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>"}    
    52.     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>"}    
    53.     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>"}    
    54.     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>"}    
    55.     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>"}    
    56.     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>"}    
    57.     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>"}    
    58.     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>"}    
    59.     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>"}    
    60.     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>"}    
    61.     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>"}    
    62.     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>"}        
    63.                                     }                            
    64.                                      }
    65.  
    66.  
    67. function container_pic_1() { javascript:document.getElementById('prev_container').style.display= "none"; }
    68.  
    69. function hover_dot_a (index) {
    70.     var current_dot = "n_" + index
    71.     var index18 = "javascript:setSlide(" +index+")"
    72.     var index_bg = index
    73.     document.getElementById(current_dot).style.backgroundPosition="0 22";
    74.     document.getElementById('prev_container').style.left= index*22+59 +"px";
    75.     document.getElementById('prev_container').style.display= "block";
    76.     document.getElementById('prev_link18').href= index18
    77.                              }
    78.  
    79. function out_dot_a (index)   {
    80.     var current_dot = "n_" + index
    81.     document.getElementById(current_dot).style.backgroundPosition="0 22px";
    82.                               }
    83. });
    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: 30.01.2011
    #1      
  2. Robbyn-

    Robbyn- PHP / Flex Programmierer

    Dabei seit:
    18.12.2006
    Beiträge:
    553
    Geschlecht:
    männlich
    Ort:
    Schmallenberg
    Software:
    CC, JetBrains PhpStorm 8, Flash Builder 4.7
    jQuery Cycle Plugin - noconflict
    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.
     
    #2      
  3. SGAMaddin

    SGAMaddin Nicht mehr ganz neu hier

    Dabei seit:
    15.06.2008
    Beiträge:
    70
    Geschlecht:
    männlich
    Software:
    Cinema 4d R12, ZBrush3, Vue, Apophysis, Photshop, Dreamweaver, AfterEffects, Flash
    jQuery Cycle Plugin - noconflict
    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....
     
    #3      
  4. Robbyn-

    Robbyn- PHP / Flex Programmierer

    Dabei seit:
    18.12.2006
    Beiträge:
    553
    Geschlecht:
    männlich
    Ort:
    Schmallenberg
    Software:
    CC, JetBrains PhpStorm 8, Flash Builder 4.7
    jQuery Cycle Plugin - noconflict
    AW: jQuery Cycle Plugin - noconflict

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

    PHP:
    1.  
    2. <script type="text/javascript">
    3.     jQuery.noConflict();
    4. </script>
    5.  
    denn so wie du das stehen hast denke ich mal will er alle $ durch jQuery ersetzen.
     
    #4      
  5. SGAMaddin

    SGAMaddin Nicht mehr ganz neu hier

    Dabei seit:
    15.06.2008
    Beiträge:
    70
    Geschlecht:
    männlich
    Software:
    Cinema 4d R12, ZBrush3, Vue, Apophysis, Photshop, Dreamweaver, AfterEffects, Flash
    jQuery Cycle Plugin - noconflict
    AW: jQuery Cycle Plugin - noconflict

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

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    jQuery Cycle Plugin - noconflict
    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/
    wenn du im Headbereich so etwas notierst:
    Code (Text):
    1.  
    2. 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 (Text):
    1. window.onload = function(){
    2. document.getElementById('g_play').style.display=none;
    3. }
    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 (Text):
    1.  
    2. $("#g_play").hide();
    3. //oder
    4. $("#g_play").css("display","none");
    5.  
    ps. wenn du eine andere Lightbox als die jQuery Lightbox verwendest, solltest du das vielleicht einfach ändern.
     
    Zuletzt bearbeitet: 31.01.2011
    #6      
  7. SGAMaddin

    SGAMaddin Nicht mehr ganz neu hier

    Dabei seit:
    15.06.2008
    Beiträge:
    70
    Geschlecht:
    männlich
    Software:
    Cinema 4d R12, ZBrush3, Vue, Apophysis, Photshop, Dreamweaver, AfterEffects, Flash
    jQuery Cycle Plugin - noconflict
    AW: jQuery Cycle Plugin - noconflict

    Das habe ich auch schon versucht gehabt:
    Code (Text):
    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    3.  
    4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    5. <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...
     
    #7      
  8. SGAMaddin

    SGAMaddin Nicht mehr ganz neu hier

    Dabei seit:
    15.06.2008
    Beiträge:
    70
    Geschlecht:
    männlich
    Software:
    Cinema 4d R12, ZBrush3, Vue, Apophysis, Photshop, Dreamweaver, AfterEffects, Flash
    jQuery Cycle Plugin - noconflict
    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:Lightbox 2
     
    #8      
  9. Robbyn-

    Robbyn- PHP / Flex Programmierer

    Dabei seit:
    18.12.2006
    Beiträge:
    553
    Geschlecht:
    männlich
    Ort:
    Schmallenberg
    Software:
    CC, JetBrains PhpStorm 8, Flash Builder 4.7
    jQuery Cycle Plugin - noconflict
    AW: jQuery Cycle Plugin - noconflict

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

    PHP:
    1.  
    2. $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
    3.  
    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
     
    #9      
  10. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    jQuery Cycle Plugin - noconflict
    AW: jQuery Cycle Plugin - noconflict

    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 jquery Lightbox 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.
     
    #10      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×