E-Commerce, Web Design, Custom Solutions.

JQuery Slider / Carousel Images


With JQuery growing in popularity I thought I would offer a simply way to get external images into your sliders. We use some variation on this method for most client sites.

Most of these plugging require <ul> tags but some use <div> tags. You can change the code below as needed.

NOTE: The counter command and the gettokenLast() function are not required and included for educational purposes only.

<!-- read this folder an load an array of all .jpg images -->
<mvt:item name="ry_toolbelt" param="Dir|g.len|'/mm5/slider/'|'.jpg'|'script'" />
<mvt:if expr="g.len">
  <ul class="slider">
    <mvt:foreach iterator="item" array="dir">
      <mvt:item name="ry_toolbelt" param="counter|img+1" />
      <mvt:item name="ry_toolbelt" param="assign|g.filename|gettokenLast(l.all_settings:item:name,'/')" />       <li>
        <a href="javascript:imageswap('&mvt:item:name;')">
          <img id="image_&mvt:global:counter:img;"
               src="http://&mvt:global:domain:name;&mvt:item:name;"
               alt="mvt:global:filename;"
               width="100" height="100 "/>
        </a>       </li>
    </mvt:foreach>
  <ul>
</mvt:if>