Zwei Funktionen vereinen - wie geht das?

[eierkopf]

Hallo,

ich bin neu hier im Forum und habe von JavaScript so gut wie keine Ahnung. Ich würde aber gern ein Projekt mit wookmark.js realisieren.

Bei den Beispielen zu wookmark habe ich zwei Codes gefunden, die ich kombinieren möchte:

1. Wookmark Flexible Example

  <!-- Include the imagesLoaded plug-in -->
  <script src="../js/imagesloaded.pkgd.min.js"></script>

  <!-- Include the plug-in -->
  <script src="../js/wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function() {
      function getWindowWidth() {
        return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
      }

      // Instantiate wookmark after all images have been loaded
      var wookmark;
      imagesLoaded('#container', function() {
        wookmark = new Wookmark('#container', {
          itemWidth: 300, // Optional min width of a grid item
          outerOffset: 20, // Optional the distance from grid to parent
          flexibleWidth: function () {
            // Return a maximum width depending on the viewport
            return getWindowWidth() < 1024 ? '100%' : '50%';
          }
        });
      });
    })();
  </script>

2. Wookmark Lightbox Example

  <!-- include jQuery -->
  <script src="../js/jquery.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="../js/imagesloaded.pkgd.min.js"></script>

  <!-- include magnific popup -->
  <script src="../js/jquery.magnific-popup.min.js"></script>

  <!-- Include the plug-in -->
  <script src="../js/wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($) {
      // Prepare layout options.
      var wookmark;

      // Init lightbox
      $('#container').magnificPopup({
        delegate: 'li:not(.inactive) a',
        type: 'image',
        gallery: {
          enabled: true
        }
      });

      // Call the layout function after all images have loaded
      imagesLoaded('#container', function () {
        wookmark = new Wookmark('#container', {
          offset: 2, // Optional, the distance between grid items
          itemWidth: 210 // Optional, the width of a grid item
        });
      });
    })(jQuery);
  </script>

Es sollen also zunächst die Bilder flexibel angezeigt werden und wenn man ein Bild anklickt, soll die Lightbox geöffnet werden.

Vielen Dank für eure Hilfe.

 

[kkapsner]

Du musst doch eigentlich nur die Optionen vom oberen Skript in dem unteren einsetzen... was ist genau dein Problem?