Wookmark jQuery Plugin

[karabey]

Hallo,

Ich versuche gerade den Wookmark im Shop einzusetzen. Es sollte Neue Produkte auf Wookmark Art auflisten.

Vorgang

jquery.wookmark.js in den Ordner /javascript und dann in general.js einbinden

Code: PHP  [Auswählen]

<script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.wookmark.js"></script>

style.css unbennant in wookmark.css und in den Ordner /css sowie in general.css eingebunden

Code: PHP  [Auswählen]

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/wookmark.css" type="text/css" media="screen" />

Damit der Javascript nicht überall aufgerufen wird habe ich es direkt in den new_products_default.html eingepackt

Code: Javascript  [Auswählen]

<script type="text/javascript">
    $(document).ready(new function() {
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#main'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };
     
      // Get a reference to your grid items.
      var handler = $('#tiles li');
     
      // Call the layout function.
      handler.wookmark(options);
     
      // Capture clicks on grid items.
      handler.click(function(){
        // Randomize the height of the clicked item.
        var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
        $(this).css('height', newHeight+'px');
       
        // Update the layout.
        handler.wookmark();
      });
    });
  </script>

Zuletzt ruft man nur noch die neuesten Produkte in new_products_default.html auf

Code: PHP  [Auswählen]

<div id="main" role="main">

      <ul id="tiles">{foreach name=aussen item=module_data from=$module_content}
        {if $module_data.PRODUCTS_IMAGE!=''}
        <li><a href="#"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a><p>{$module_data.PRODUCTS_NAME}</p></li>
        {/if}{/foreach}
      </ul>

    </div>

Hier erscheinen nur die neuesten Produkte zwar aber das Javascript möchte nicht die einzelnen boxen nebeneinander sortieren. Gehe ich mit der Schleife falsch um?

Linkback: https://www.modified-shop.org/forum/index.php?topic=23815.0