Forum

Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

Erstellt von wildner2010, 15.12.2010.



  1. wildner2010

    wildner2010 Noch nicht viel geschrieben

    Dabei seit:
    15.12.2010
    Beiträge:
    23
    Geschlecht:
    männlich
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    Hallo,

    ich bin gerade dabei, die Fancybox für eine Bildergalerie einzusetzen.
    Unter "http://fancybox.net/api" werden verschiedene Optionen aufgelistet, die innerhalb der jquery.fancybox-1.3.4.js - Datei vorgenommen werden können.

    Nur leider ist es so, dass jegliche Veränderung bei mir keinerlei Auswirkung im Verhalten der Lightbox zeigt.

    Wenn ich z.B. bei "speedIn, speedOut" den Wert ändere, ändert sich rein gar nichts. Und so verhält sich das bei allen Modifikationen.

    Woran kann das liegen?

    Außerdem möchte ich die Bildunterschrift "Image 1 / 6 Lorem ipsum dolor sit amet" beliebig ändern. Und auch hier kann ich innerhalb der einzelnen Fancybox-Dateien die dafür verantwortliche Stelle nicht finden.

    Abschließend bitte ich noch um die Info, wie der weiße äußere Rand, der um die Lightbox erstellt wird, in eine andere Farbe umgewandelt und die Größe/Dicke verändert werden kann.

    Ich versuche mich gerade innerhalb des Dreamweavers und habe (noch) keine Seite online. Daher kann ich auf keinen eigenen Link verweisen. Ich denke aber, dass die Fragen eher allgemein gehalten sind.

    Vielen Dank für Eure Hilfe!

    Wildner2010
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Wo änderst du was und wie? Auch wenn du keine Seite online hast, hast du die Möglichkeit deine Versuche hier in Form von Quelltext zu posten.
     
    #2      
  3. wildner2010

    wildner2010 Noch nicht viel geschrieben

    Dabei seit:
    15.12.2010
    Beiträge:
    23
    Geschlecht:
    männlich
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Hallo,

    ich ändere in der Datei, die unter "http://fancybox.net/api" angegeben ist (jquery.fancybox-1.3.4.js). Diese ist innerhalb des Ordners, den man erhält, nachdem die Fancybox heruntergeladen wurde.

    Hier die Stelle, an der laut Anleitung die Änderungen vorgenommen werden sollten...

    HTML:
    1. $.fn.fancybox.defaults = {
    2.         padding : 10,
    3.         margin : 40,
    4.         opacity : false,
    5.         modal : false,
    6.         cyclic : false,
    7.         scrolling : 'auto',    // 'auto', 'yes' or 'no'
    8.  
    9.         width : 560,
    10.         height : 340,
    11.  
    12.         autoScale : true,
    13.         autoDimensions : true,
    14.         centerOnScroll : false,
    15.  
    16.         ajax : {},
    17.         swf : { wmode: 'transparent' },
    18.  
    19.         hideOnOverlayClick : true,
    20.         hideOnContentClick : false,
    21.  
    22.         overlayShow : true,
    23.         overlayOpacity : 0.7,
    24.         overlayColor : '#777',
    25.  
    26.         titleShow : true,
    27.         titlePosition : 'float', // 'float', 'outside', 'inside' or 'over'
    28.         titleFormat : null,
    29.         titleFromAlt : false,
    30.  
    31.         transitionIn : 'fade', // 'elastic', 'fade' or 'none'
    32.         transitionOut : 'fade', // 'elastic', 'fade' or 'none'
    33.  
    34.         speedIn : 300,
    35.         speedOut : 300,
    36.  
    37.         changeSpeed : 300,
    38.         changeFade : 'fast',
    39.  
    40.         easingIn : 'swing',
    41.         easingOut : 'swing',
    42.  
    43.         showCloseButton     : true,
    44.         showNavArrows : true,
    45.         enableEscapeButton : true,
    46.         enableKeyboardNav : true,
    47.  
    48.         onStart : function(){},
    49.         onCancel : function(){},
    50.         onComplete : function(){},
    51.         onCleanup : function(){},
    52.         onClosed : function(){},
    53.         onError : function(){}
    54.     };
    55.  
    56.     $(document).ready(function() {
    57.         $.fancybox.init();
    58.     });
    59.  
    60. })(jQuery);

    Und was meine Fragen bezüglich des äußeren Rand und der Bildunterschrift betreffen, tappe ich trotz stundenlanger Forensuche total im Dunkeln.
     
    Zuletzt von einem Moderator bearbeitet: 15.12.2010
    #3      
  4. AndrOve

    AndrOve *

    Dabei seit:
    07.10.2009
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    Gimp, Notepad++, AVR-Studio, DevCpp, Eagle V5.6.0
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Hallo Wildner2010 !

    Vielleicht wird die Seite nur nicht neu geladen und liegt in Deinem Browsercache. Lösch' den mal und schau, ob's dann klappt.

    Die Bildunterschrift liegt im title-Attribut des umschließenden <a>-Tags.
    Hoffe, dass Dir das helfen wird

    Gruß Andreas
     
    #4      
  5. wildner2010

    wildner2010 Noch nicht viel geschrieben

    Dabei seit:
    15.12.2010
    Beiträge:
    23
    Geschlecht:
    männlich
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Vielen Dank Andreas,

    das mit der Bildunterschrift habe ich nun verstanden. Wenn ich diese nicht möchte, muss ich einfach das title Attribut leer lassen.

    Weist Du wie ich aus "Image 2 / 6" z.B. "Bild 1/6" machen kann, sprich, wo diese Änderung vorzunehmen ist?

    Schöne Grüße
     
    #5      
  6. AndrOve

    AndrOve *

    Dabei seit:
    07.10.2009
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    Gimp, Notepad++, AVR-Studio, DevCpp, Eagle V5.6.0
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Bitte. Und Danke fürs Danke :)

    Du könntest beispielsweise die Funktion
    HTML:
    1. function formatTitle(title, currentArray, currentIndex, currentOpts) {
    2.     return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
    3. }
    so ersetzen.
    HTML:
    1. function formatTitle(title, currentArray, currentIndex, currentOpts) {
    2.     return '<div id="tip7-title"><span><a href="javascript:;"  onclick="$.fancybox.close();"><img src="/data/closelabel.gif"  /></a></span>' + (title && title.length ?  '<b>' + title + '</b>' : '' )  + '</div>';
    Dann sollten die Zahlen weg sein.
    Gruß Andreas
     
    #6      
  7. wildner2010

    wildner2010 Noch nicht viel geschrieben

    Dabei seit:
    15.12.2010
    Beiträge:
    23
    Geschlecht:
    männlich
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Hallo Andreas,

    also die Zahlen an sich bräuchte ich schon. Nur würde ich Bildnummer gerne auf Deutsch schreiben.

    Das Löschen des Browsercache hat übrigens auch keine Hilfe bezüglich der Änderungen in der JS-Datei gebracht...
     
    #7      
  8. AndrOve

    AndrOve *

    Dabei seit:
    07.10.2009
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    Gimp, Notepad++, AVR-Studio, DevCpp, Eagle V5.6.0
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    hallo,

    wenn 'Bild' statt 'Image' hineingeschrieben werden soll, dann solltest Du die Funktion so anpassen:
    HTML:
    1. function formatTitle(title, currentArray, currentIndex, currentOpts) {
    2.     return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Bild' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
    3. }
    Poste 'mal bitte den Head-Bereich der Seite oder setz' bitte nen Link, damit mensch sich ein Bild machen kann.

    Gruß Andreas
     
    #8      
  9. wildner2010

    wildner2010 Noch nicht viel geschrieben

    Dabei seit:
    15.12.2010
    Beiträge:
    23
    Geschlecht:
    männlich
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
    $(document).ready(function() {
    /*
    * Examples - images
    */

    $("a#example1").fancybox();

    $("a#example2").fancybox({
    'overlayShow' : false,
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic'
    });

    $("a#example3").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none'
    });

    $("a#example4").fancybox({
    'opacity' : true,
    'overlayShow' : false,
    'transitionIn' : 'elastic',
    'transitionOut' : 'none'
    });

    $("a#example5").fancybox();

    $("a#example6").fancybox({
    'titlePosition' : 'outside',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.9
    });

    $("a#example7").fancybox({
    'titlePosition' : 'inside'
    });

    $("a#example8").fancybox({
    'titlePosition' : 'over'
    });

    $("a[rel=example_group]").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
    });

    /*
    * Examples - various
    */

    $("#various1").fancybox({
    'titlePosition' : 'inside',
    'transitionIn' : 'none',
    'transitionOut' : 'none'
    });

    $("#various2").fancybox();

    $("#various3").fancybox({
    'width' : '75%',
    'height' : '75%',
    'autoScale' : false,
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'type' : 'iframe'
    });

    $("#various4").fancybox({
    'padding' : 0,
    'autoScale' : false,
    'transitionIn' : 'none',
    'transitionOut' : 'none'
    });
    });
    </script>
    </head>
    <body>
    <div id="content">
    <h1>fancybox <span>v1.3.4</span></h1>

    <p>This is a demonstration. <a href="http://fancybox.net">Home page</a></p>

    <hr />

    <p>
    Different animations<br />

    <a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>

    <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>

    <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>

    <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
    </p>

    <p>
    Different title positions<br />

    <a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>

    <a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>

    <a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>

    <a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>
    </p>

    <p>
    Image gallery (ps, try using mouse scroll wheel)<br />

    <a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>

    <a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>

    <a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>

    <a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
    </p>

    <p>
    Various examples
    </p>

    <ul>
    <li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
    <li><a id="various2" href="ajax.txt">Ajax</a></li>
    <li><a id="various3" href="http://google.ca">Iframe</a></li>
    <li><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li>
    </ul>

    <div style="display: none;">
    <div id="inline1" style="width:400px;height:100px;overflow:auto;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
    </div>

    <p>
    Ajax example will not run from your local computer and requires a server to run.
    </p>
    <p>
    Photo Credit: <a href="http://www.flickr.com/people/kharied/">Katie Harris</a>
    </p>
    </div>
    </body>
    </html>
     
    #9      
  10. AndrOve

    AndrOve *

    Dabei seit:
    07.10.2009
    Beiträge:
    96
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    Gimp, Notepad++, AVR-Studio, DevCpp, Eagle V5.6.0
    Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)
    AW: Benötige Hilfe beim Modifizieren der Fancybox - (jQuery Lightbox)

    Hallo,

    der Fehler liegt vermutlich darin, dass Du das Javascript nicht einbindest.
    Du bindest
    HTML:
    1. <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    ein, änderst aber stattdessen, wenn Du Dich nicht in Deinem ersten Post verschrieben hast,
    Ich seh' im Moment nicht, wie die Daten aus jquery,fancybox-1.3.4.js in die Seite eingebunden werden :muede:
    Hoffentlich hab ich jetzt da nix überlesen....

    Versuch mal, ob die Fancybox mit dem Einbinden
    HTML:
    1. <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
    Deinen Wünschen entsprechend funktioniert.

    Besser ist es aber, wenn Du Deine Overrides in ein separates Javascript auslagerst und einbindest, anstatt im Original Fancybox-Source-Code Änderungen vorzunehmen.
    So bleiben Deine Einstellungen auch bei einem Update des Fancybox-Cores erhalten.

    Gruß Andreas
     
    #10      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×