Forum

Lightbox geht nicht

Erstellt von Bleccer, 20.06.2011.



  1. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    Ich bin gerade dabei meine neue Seite noch ein bisschen auf zu werten. Ich habe einen Slider auf meiner Seite eingebaut dabei soll wenn man auf ein Bild klickt sich das Bild in einer Lightbox öffnen. Hab auch alles soweit gemacht doch leider öffnet sich das Bild nicht in der Lightbox sondern nur in einem neuen Fenster.

    Weiß jemand eine Lösung für mich?

    Danke im Voraus.

    Hier die Seite inet-maker.de

    Edit: Als Test habe ich nur das erste Bild in der Slideshow mit dem rel="lightbox" Attribut versehen.
     
    #1      
  2. netbandit

    netbandit Aktives Mitglied

    12
    Dabei seit:
    18.05.2008
    Beiträge:
    1.145
    Geschlecht:
    männlich
    Lightbox geht nicht
    AW: Lightbox geht nicht

    http://www.huddletogether.com/projects/lightbox2/#example

    Mal schauen, vielleicht war es das auch schon ;)
     
    #2      
  3. 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
    Lightbox geht nicht
    AW: Lightbox geht nicht

    vielleicht wäre es besser auch die jQuery lightbox zu verwenden, satt ein weiteres framework zu laden.
     
    #3      
  4. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    HTML:
    1. <script type="text/javascript" src="js/prototype.js"></script>
    ...Eintrag fehlt
     
    #4      
  5. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    geht leider trotzdem nicht habs kurz mit der anderen lightbox probiert, geht auch nicht.

    Edit: wenn ich

    <script type="text/javascript" src="js/prototype.js"></script>

    einfüge werden die Bilder von der Slideshow untereinander angezeigt und es klappt trotzdem nicht.
     
    #5      
  6. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Es ist nur ein Versuch:
    Du benutzt lightbox.js in der 2.04 Version. Lade mal die bereinigte 2.05 Version und teste es nochmal. Die Links stimmen soweit. Es könnte natürlich sein, da Du verschiedene framework verwendest, das sie sich gegenseitig beinflussen.
     
    #6      
  7. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    hab jetzt aktuellste Version, alles so wie in der Anleitung gemacht und jetzt sieht die Seite so aus (inet-maker.de). Außerdem hab ich alles andere an Javascript etc. mal raus genommen geht aber leider trotzdem nicht.
     
    #7      
  8. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Hmm, ich habe auch etwas rumprobiert kann aber auch weiter nichts entdecken. Ich schaue morgen nochmal nach und melde mich bei Dir.
    Good Night
     
    #8      
  9. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Hi,

    das Problem an deiner Seite ist, dass ein Div 'overlay' nicht erzeugt wird und dadurch in der 'lightbox.js' in Zeile 209 ein Fehler auftritt ("$('overlay') is null").

    Nach Betrachtung deiner Seite, wird am Ende der Seite kein Div automatisiert eingefügt (auf der Seite von Lightbox 2 wird der Part erzeugt). Feststellen kannst du das, indem du im Firefox alles markierst (<Strg> + <A>), dann Rechtsklick => Auswahl-Quelltext anzeigen. So siehst du auch JS-generiertes HTML! ;) Weiterhin hätte dir die Fehlerkonsole von Firefox geholfen, da dort der Fehler "$('overlay') is null" angezeigt wird.

    Der Code, der automatisch eingefügt werden sollte sieht so aus (Auszug aus der lightbox.js; Zeile 96):
    Code (Text):
    1. // Code inserts html at the bottom of the page that looks similar to this:
    2. //
    3. //  <div id="overlay"></div>
    4. //  <div id="lightbox">
    5. //      <div id="outerImageContainer">
    6. //          <div id="imageContainer">
    7. //              <img id="lightboxImage">
    8. //              <div style="" id="hoverNav">
    9. //                  <a href="#" id="prevLink"></a>
    10. //                  <a href="#" id="nextLink"></a>
    11. //              </div>
    12. //              <div id="loading">
    13. //                  <a href="#" id="loadingLink">
    14. //                      <img src="http://www.psd-tutorials.de/forum/images/loading.gif">
    15. //                  </a>
    16. //              </div>
    17. //          </div>
    18. //      </div>
    19. //      <div id="imageDataContainer">
    20. //          <div id="imageData">
    21. //              <div id="imageDetails">
    22. //                  <span id="caption"></span>
    23. //                  <span id="numberDisplay"></span>
    24. //              </div>
    25. //              <div id="bottomNav">
    26. //                  <a href="#" id="bottomNavClose">
    27. //                      <img src="http://www.psd-tutorials.de/forum/images/close.gif">
    28. //                  </a>
    29. //              </div>
    30. //          </div>
    31. //      </div>
    32. //  </div>
    Edit: das Forum fügt von selbst "http://www.psd-tutorials.de/forum/" dem IMG-Tag hinzu...

    Woran das allerdings liegt, weiß ich zur Zeit nicht!

    Schöne Grüße aus dem Sauerland!
    Chriss
     
    Zuletzt bearbeitet: 21.06.2011
    #9      
  10. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    ok und wie könnte ich diesen Fehler beheben?
     
    #10      
  11. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Tja das Pferd ist tot, aber wer hat es erschossen?:D
    Zunächst läuft es bei mir. Zum Vergleich habe ich die Testdatei hochgeladen http://www.norbert-klippstein.de/Lightbox-test.rar um die Verlinkung zu vergleichen. In der Style.css habe ich einige Grafiklinks umgestellt, um etwas zu sehen, hat nichts mit Lightbox zu tun. Irgendwo klemmt es doch an der Verlinkung bei Dir.
     
    #11      
  12. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Hi,

    irgend was mit deinen Dateien stimmt nicht, ich hatte mal alles andere rausgeschmissen und auf deine Dateien gelinkt:
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4.  
    5. <script type="text/javascript" src="http://inet-maker.de/lightbox/prototype.js"></script>
    6. <script src="http://inet-maker.de/lightbox/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    7. <script src="http://inet-maker.de/lightbox/lightbox.js" type="text/javascript"></script>
    8. <link rel="stylesheet" href="http://inet-maker.de/lightbox/lightbox.css" type="text/css" media="screen" />    
    9. </head>
    10.  
    11. <a rel="lightbox" href="http://inet-maker.de/slide/img/praktikum_infomax.jpg"><img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" alt="Praktikumsbest&auml;tigung bei Infomax" width="200" height="150" /></a>
    12.  
    13. </body>
    14. </html>
    ändere ich allerdings die Pfade auf die Dev-Hp, funktioniert es:
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4.  
    5. <script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js"></script>
    6. <script src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    7. <script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js" type="text/javascript"></script>
    8. <link rel="stylesheet" href="http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" />    
    9. </head>
    10.  
    11. <a rel="lightbox" href="http://inet-maker.de/slide/img/praktikum_infomax.jpg"><img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" alt="Praktikumsbest&auml;tigung bei Infomax" width="200" height="150" /></a>
    12.  
    13. </body>
    14. </html>
    Am besten mal Dateien neu runterladen und überschreiben.

    Schöne Grüße aus dem Sauerland!
    Chriss

    Edit: da war wohl jemand schneller... :p ;)
     
    #12      
  13. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    danke für eure Hilfe das einzigste Problem was ich jetzt noch hab ist das die Slideshow i-wie die Lightbox blockt oder überschreibt. Das heißt wenn ich das Lightbox Script vor die Slideshow setze dann geht die Lightbox aber die Slideshow nicht wie könnte ich das Problem lösen?
     
    #13      
  14. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    yep, verschiedene framework......etc.
    Hier die Version, ähnlich wie @sokie vorgeschlagen hat im jQuery framework zu bleiben, adaptiert und getestet.
    Quelle: http://flowplayer.org/tools/demos/overlay/index.html
    oder siehe http://flowplayer.org/tools/demos/overlay/index.htm
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="content-language" content="de" />
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <meta name="generator" content="PhpED Version 6.0 (Build 6026)" />
    6. <title>Dominik Siebelhoff - Portfolio</title>
    7. <meta name="description" content="Auf dieser Seite finden Sie alle Arbeiten von dem Webdesiger Dominik Siebelhoff." />
    8. <meta name="keywords" content="Dominik Siebelhoff, Webdesign, Webentwicklung, Entwicklung," />
    9. <meta name="author" content="Dominik Siebelhoff" />
    10. <meta http-equiv="reply-to" content="info@dominik-siebehoff.de" />
    11. <link rel="shortcut icon"  href="file:///C|/Users/Jens/Desktop/img/favicon.ico" />
    12. <meta name="creation-date" content="06/08/2011" />
    13. <meta name="robots" content="index, follow" />
    14. <meta name="revisit-after" content="7 days" />
    15. <link type="text/css" rel="stylesheet" href="style.css" />
    16. <script type="text/javascript" src="http://apis.google.com/js/plusone.js">
    17. {lang: 'de'}
    18.  
    19. <!-- ALT  gelöscht <script type="text/javascript" src="http://inet-maker.de/slide/jquery-1.2.1.pack.js"></script>-->
    20. <!--Neue Version-->
    21. <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    22. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
    23. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>
    24. <!--Ende Neue Version-->
    25.  
    26. <script type="text/javascript" src="http://inet-maker.de/slide/jMyCarousel.js"></script>
    27. <script type="text/javascript">
    28.         $(function() {
    29.  
    30.             $(".jMyCarousel").jMyCarousel({
    31.                 visible: '4',
    32.                 eltByElt: true,
    33.                 evtStart: 'mousedown',
    34.                 evtStop: 'mouseup'
    35.             });
    36.  
    37.         });
    38.     </script>
    39.  
    40. <!--Neue Version-->
    41. #triggers { text-align:center; }
    42. #triggers img {
    43.     cursor:pointer;
    44.     margin:0 5px;
    45.     background-color:#fff;
    46.     border:1px solid #ccc;
    47.     padding:2px;
    48.     -moz-border-radius:4px;
    49.     -webkit-border-radius:4px;
    50. }
    51. /* styling for elements inside overlay */
    52.     .details {
    53.     position:absolute;
    54.     top:15px;
    55.     right:15px;
    56.     font-size:11px;
    57.     color:#fff;
    58.     width:150px;
    59. }
    60. .details h3 {
    61.     color:#aba;
    62.     font-size:15px;
    63.     margin:0 0 -10px 0;
    64. }
    65. </head>
    66. <!-- Tooltip -->
    67. <div id="eins" class="tooltip">Such Maschinen Optimierung</div>
    68. <div id="zwei" class="tooltip">Content Managment System</div>
    69. <div id="drei" class="tooltip">Datenbank Sprache</div>
    70. <div id="vier" class="tooltip">Programmiersprache (Foren etc.)</div>
    71. <div id="funf" class="tooltip">Content Managment System (Blog)</div>
    72. <div id="sechs" class="tooltip">Ladezeit von Webseiten optimieren</div>
    73. <div id="sieben" class="tooltip">Hinzuf&uuml;gem von Texten, Bildern ...</div>
    74. <div id="acht" class="tooltip">dynamische Webseiten</div>
    75. <div id="neun" class="tooltip">Gestaltung der Webseite</div>
    76. <div id="zehn" class="tooltip">Folge mir auf Facebook</div>
    77. <div id="elf" class="tooltip">Folge mir auf Twitter</div>
    78. <div id="zwelf" class="tooltip">RSS-Feed abonnieren</div>
    79. <!-- -->
    80. <div id="wrapper">
    81.   <div id="header">
    82.     <h1 class="inline">Inet-Maker</h1>
    83.     <img src="http://inet-maker.de/img/logo.png" class="inline" title="Logo" alt="Logo" />
    84.     <h1 class="inline">Portfolio</h1>
    85.     <div id="sozial" class="inline"> <a href="http://www.facebook.com/pages/Inet-Makerde/141525412574497" onmouseover="showWMTT('zehn')" onmouseout="hideWMTT()"><img src="http://inet-maker.de/img/fb.png" alt="Facebook" class="inline" /></a> <a href="http://twitter.com/#!/InetMaker"><img src="http://inet-maker.de/img/twitter.png" class="inline" onmouseover="showWMTT('elf')" alt="Twitter" onmouseout="hideWMTT()" /></a> <a href="file:///C|/Users/Jens/Desktop/feed.xml"><img src="file:///C|/Users/Jens/Desktop/img/rss.png" class="inline" onmouseover="showWMTT('zwelf')" onmouseout="hideWMTT()" alt="RSS-Feed" /></a> </div>
    86.   </div>
    87.   <div id="navigation">
    88.     <ul id="nav">
    89.       <li class="start"><a href="#port_h2" title="Portfolio">Portfolio</a></li>
    90.       <li><a href="#ueber_mich" title="&Uuml;ber mich">&Uuml;ber mich</a></li>
    91.       <li><a href="#skills" title="Kenntnisse">Kenntnisse</a></li>
    92.       <li class="end"><a href="#footer" title="Kontakt">Kontakt</a></li>
    93.     </ul>
    94.   </div>
    95.   <h2 id="port_h2">|| Portfolio</h2>
    96.   <div id="portfolio_slide">
    97.     <noscript>
    98.     <p class="error">Um bestimme Inhalte dieser Seite sehen zu können, muss Javascript aktiviert sein.</p>
    99.     </noscript>
    100.     <div class="jMyCarousel">
    101.       <ul id="triggers">
    102.         <li> <img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" width="200" height="150" rel="#mies1"/></li>
    103.         <li><img src="slide/img/praktikum_gerstmayer.jpg" width="200" height="150" alt="Praktikumsbest&auml;tigung bei Agentur Gerstmayer" /></li>
    104.         <li><img src="slide/img/siebelhoff_portal.jpg" width="200" height="150" alt="Autohaus Siebelhoff Portal" /></li>
    105.         <li><img src="slide/img/necke-film.jpg" width="200" height="150" alt="Necke-Film" /></li>
    106.       </ul>
    107.     </div>
    108.   </div>
    109.   <div class="simple_overlay" id="mies1"> <img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" /> </div>
    110.   <div id="ueber_mich">
    111.     <h2>|| &Uuml;ber mich</h2>
    112.     <img src="img/dominik-siebelhoff.jpg" alt="Dominik Siebelhoff" class="left" title="Dominik Siebelhoff" />
    113.     <p class="right"> <span class="ue_h3">Allgemein über mich</span> Meine Hobbys sind Windsurfen, Schlagzeug
    114.       spielen sowie natürlich gestalten und
    115.       programmieren.
    116.      
    117.       Zurzeit besuche ich die Leonhard-Wagner-
    118.       Realschule und werde diese voraussichtlich
    119.       in 2 Jahren mit der Mittleren-Reife verlassen.
    120.       Danach werde ich entweder auf die Fos gehen
    121.       oder eine Ausbildung als Webdesigner beginnen.
    122.      
    123.       Ihr
    124.       Dominik Siebelhoff </p>
    125.     <p class="p"><span class="strong"> Ich hei&szlig;e Dominik Siebelhoff,
    126.       komme aus Bayern und entwickle bzw. gestalte
    127.       aus Leidenschaft Webseite.</span> <span class="ue_h3">Wie kam es zum Webdesign?</span> Als ich 2007 eine kleine Anleitung zu Html las,
    128.       war ich sofort sehr begeistert davon und erkannte
    129.       gleich das, dass das richtige für mich ist. Danach
    130.       fing ich an mir Bücher zu Html und CSS zu kaufen.
    131.       Als ich diese beiden Sprachen nach ca. 1-2 Jahren
    132.       perfekt beherrschte fing ich an PHP und Javascript
    133.       zu lernen.</p>
    134.   </div>
    135.   <div id="skills" class="clear">
    136.     <h2>|| Kenntnisse</h2>
    137.     <div class="right"> <img src="img/maennchen.jpg" title="Kenntnisse" alt="M&auml;nnchen" /> </div>
    138.     <ul>
    139.       <li class="black">(X)HTML <a href="#" onmouseover="showWMTT('sieben')" onmouseout="hideWMTT()">[?]</a></li>
    140.       <li class="black">Javascript <a href="#" onmouseover="showWMTT('acht')" onmouseout="hideWMTT()">[?]</a></li>
    141.       <li class="black">SEO <a href="#" onmouseover="showWMTT('eins')" onmouseout="hideWMTT()">[?]</a></li>
    142.     </ul>
    143.     <ul id="gray" class="clearleft">
    144.       <li>CSS <a href="#" onmouseover="showWMTT('neun')" onmouseout="hideWMTT()">[?]</a></li>
    145.       <li>Contao <a href="#" onmouseover="showWMTT('zwei')" onmouseout="hideWMTT()">[?]</a></li>
    146.       <li>MySql <a href="#" onmouseover="showWMTT('drei')" onmouseout="hideWMTT()">[?]</a></li>
    147.     </ul>
    148.     <ul class="clearleft">
    149.       <li>PHP <a href="#" onmouseover="showWMTT('vier')" onmouseout="hideWMTT()">[?]</a></li>
    150.       <li>Wordpress <a href="#" onmouseover="showWMTT('funf')" onmouseout="hideWMTT()">[?]</a></li>
    151.       <li>WPO <a href="#" onmouseover="showWMTT('sechs')" onmouseout="hideWMTT()">[?]</a></li>
    152.     </ul>
    153.   </div>
    154.   <div id="footer">
    155.     <div id="left" class="left"> <img src="file:///C|/Users/Jens/Desktop/img/contact.png" class="left" alt="Kontakt" title="Kontakt" />
    156.       <h2>Kontakt</h2>
    157.       <p id="kontakt">Wenn sie möchten dürfen Sie gerne über das
    158.         Formular rechts Kontakt mit mir aufnehmen. <br />
    159.         <br />
    160.         Für Angebote zur Erstellung von Webseiten
    161.         kontaktieren Sie mich auch bitte über das
    162.         Formular rechts.</p>
    163.       <div id="fb-root"></div>
    164.       <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=207965089241005&amp;xfbml=1"></script>
    165.       <fb:like href="http://www.facebook.com/pages/Inet-Makerde/141525412574497" send="true" layout="button_count" width="150" show_faces="true" font="arial"></fb:like>
    166.      
    167.       <!-- standard -->
    168.       <g:plusone></g:plusone>
    169.       <a href="http://twitter.com/InetMaker" class="twitter-follow-button" data-lang="de">Follow @InetMaker</a>
    170.       <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><br />
    171.       <br />
    172.       <p><a href="http://www.inet-maker.de" title="Inet-Maker.de">Inet-Maker.de</a> - <a href="http://www.dominik-siebelhoff.de" title="Dominik-Siebelhoff.de">Dominik-Siebelhoff.de</a> - <a href="http://www.webentwicklung-augsburg.de">Webentwicklung-Augsburg.de</a></p>
    173.     </div>
    174.     <form action="file:///C|/Users/Jens/Desktop/index.php#footer" method="post">
    175.       <label for="Name">Name:</label>
    176.       <br />
    177.       <input type="text" id="Name" name="Name" value="" />
    178.       <br />
    179.       <label for="Betreff">Betreff:</label>
    180.       <br />
    181.       <input type="text" id="Betreff" name="Betreff" value="" />
    182.       <br />
    183.       <label for="Email">Email:</label>
    184.       <br />
    185.       <input type="text" id="Email" name="Email" value="" />
    186.       <br />
    187.       <label for="Nachricht">Nachricht:</label>
    188.       <br />
    189.       <textarea id="Nachricht" name="Nachricht"></textarea>
    190.       <br />
    191.       <input type="submit" name="senden" value="Senden" id="send" />
    192.     </form>
    193.   </div>
    194. </div>
    195. <!--Neue-->
    196. // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
    197. $(document).ready(function() {
    198. $("img[rel]").overlay();
    199. });
    200. </script>
    201. <!--End Neu-->
    202. </body>
    203. </html>
    Wichtig auch der Script-Schnipsel am Ende!!
    Optisch anpassen kannst Du es ja selber.
     
    Zuletzt bearbeitet: 21.06.2011
    #14      
  15. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Naja geht doch. Wenn Du jetzt noch eine kleine 200x150px Bildvariante Deiner Karusselbilder erzeugst wird die Website auch noch schneller geladen. Der kleinste gemeinsame Nenner ist die jQuery Tools 1.2.5 library da sie von allen Deinen Anwendungen genutzt wird. Das spart Ladezeit.
    Die Css Dateien:
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>

    extrahierst Du passt sie Deinen Bedürfnissen an und setzt sie dokumentiert(/***lightboxstyle***/)in Deine style.css ein.
    Ebenso verfährst du mit den css - Angaben im Dokument und lagerst sie aus. Verschiedene thematisierte CSS-Dateien sind zwar übersichtlich , aber ich bevorzuge ein ein gegliedertes CSS -Dokument.
    Zu guter letzt, wenn Du PHP nutzen kannst hast Du die Möglichkeit auch die CSS-Datei mittels <?php ob_start("ob_gzhandler"); ?> automatisch zu packen.
    Schnelligkeit im Webseitenaufbau ist halt Trumpf.
     
    Zuletzt bearbeitet: 21.06.2011
    #15      
  16. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Wie ich sehe befreist Du dich von Ballast. Den Eintrag
    Code (Text):
    1. #triggers img {cursor:pointer;}
    2.  
    3.  
    solltest Du aber lassen. Ansonsten ist beim darüber fahren mit der Maus nicht zu erkennen ob die Bilder Klickbar sind.
     
    #16      
  17. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    ja ich habs auch grad gesehen meine Freundin ist grad bei mir ich geh später nochmal alles durch wo ich an Ladezeit sparen kann. ^^

    weiß gerade nur nicht wie ich das mit dem Kleineren Bild hin bekommen soll, also das in der Gallary nicht das große Bild sondern das kleine geladen wird und beim klicken das große Bild kommt.
     
    #17      
  18. Walter75

    Walter75 Nicht mehr ganz neu hier

    Dabei seit:
    27.12.2009
    Beiträge:
    174
    Geschlecht:
    männlich
    Ort:
    Thüringen Südharz
    Software:
    Cs6
    Kameratyp:
    Sony a580
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Nichts leichter als das: Unter
    HTML:
    1. <div class="simple_overlay" id="mies1"> <img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" /> </div>
    ...wird das große Bild aufgerufen und
    HTML:
    1. <div class="jMyCarousel">       <ul id="triggers">         <li> <img src="http://inet-maker.de/slide/img/praktikum_infomax.jpg" width="200" height="150" rel="#mies1"/></li>         <li><img src="slide/img/praktikum_gerstmayer.jpg" width="200" height="150" alt="Praktikumsbest&auml;tigung bei Agentur Gerstmayer" /></li>         <li><img src="slide/img/siebelhoff_portal.jpg" width="200" height="150" alt="Autohaus Siebelhoff Portal" /></li>         <li><img src="slide/img/necke-film.jpg" width="200" height="150" alt="Necke-Film" /></li>       </ul>     </div>   </div>
    hier werden alle kleine Bilder aufgerufen.
    Ich mache es meistens so, das ich dem Titel ( Bild1_big.jpg und Bild1_small.jpg ) big und small anhänge. So kann man beide für ihre Größe optimieren und behält die Übersicht.
     
    #18      
  19. Bleccer

    Bleccer Guest

    Lightbox geht nicht
    AW: Lightbox geht nicht

    Vielen dank für eure Hilfe, habt sehr schön geholfen sehr ausführlich... Jetzt klappt alles danke euch
     
    #19      
  20. konzept

    konzept Noch nicht viel geschrieben

    Dabei seit:
    08.03.2012
    Beiträge:
    4
    Geschlecht:
    weiblich
    Lightbox geht nicht
    AW: Lightbox geht nicht

    Hallo,

    ich habe das selbe Problem und komme nicht weiter. Die Lightbox 2.05 ist ja aktuell bei mir, aber wie bekomme ich den Fehler in Zeile 209 im Javascript behoben?

    Im Firebug wird folgender Fehler angezeigt: $("overlay") is null
    Zeile 209 $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

    Wäre super, wenn mir da jemand weiter helfen könnte.

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