How to make slider work for your template

dody — Fri, 04 Jun 2010 07:07:20 +0000

Indexu use stepcarousel.js for image slider. I realize that the slider need to be customized for each template.
Here is some direction how to make it work for any templates you want.

1) Check your header.html file, make sure you have base tag and jquery loaded. Here is my html head section to start:

  <link href="<%$tpl_base%>/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">
	<%foreach from=$additional_js key="name_js" item="file_js" name="addition_js"%>
    <script type="text/javascript" src="<%$file_js%>"></script>
  <%/foreach%>
  <script type='text/javascript' src='<%$tpl_base%>/jquery.js'></script>
  <script type='text/javascript' src='<%$tpl_base%>/jquery.autocomplete.min.js'></script>
 
	<script type="text/javascript">
  jQuery(document).ready(function($){
    $("#keyword").autocomplete("<%$site_url%>/autocomplete.php?mode=link");
  });
	</script>
 
  <base href="<%$site_url%>/" />

2) In index.html, call the slider block.

<%block_slide max_item="20"%>

3) Open /blocks/block.slider.html, notice the slider parameter and there are important html class: slideshow and stepcarousel. Later you will need to set the css width of these class. Also make attention with navigation button (left/right) defaultbuttons, you may want to replace the image and adjust the position.

<%if $link%>
    <script type="text/javascript" src="<%$tpl_base%>/stepcarousel.js"></script>
    <script type="text/javascript">
 
    stepcarousel.setup({
      galleryid: 'mygallery', //id of carousel DIV
      beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
      panelclass: 'panel', //class of panel DIVs each holding content
      autostep: {enable:true, moveby:1, pause:2000},
      panelbehavior: {speed:500, wraparound:true, persist:true},
      defaultbuttons: {enable: true, moveby: 1, leftnav: ['<%$tpl_base%>/images/play_l.png', -5, 35], rightnav: ['<%$tpl_base%>/images/play_r.png', -20, 35]},
      statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
      contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
 
    </script>
<%$hook_html_block_slide_begin%>
				<div class="content_box_full slideshow">
        <div id="mygallery" class="stepcarousel">
            <div class="belt">
	<%$link%>
            </div>
          </div>
					<div class="clear"></div>
				</div>
 
 
<%$hook_html_block_slide_end%>
<%/if%>

4) Open /blocks/block.slider_row.html, you may want to customize something here. In most case, just leave it as it is.

<%$hook_html_block_slide_rows_begin%>
 
  <div class="panel">
    <a href="<%$site_url%>/<%$detail_page_url%>" name="link_<%$link_id%>"><img src="http://open.thumbshots.org/image.aspx?url=<%$url%>" alt="<%$title%>"></a>
  </div>
 
<%$hook_html_block_slide_rows_end%>

5) Now you need to customize the css, you can use main.css, add and adjust the following css code to suit your need. Usually you need to change .slideshow width and .stepcarousel width.

.slideshow {
  background: #ddd;
  width:570px;
}
 
.stepcarousel{
  position: relative; /*leave this value alone*/
  overflow: scroll; /*leave this value alone*/
  width: 555px; /*Width of Carousel Viewer itself*/
  height: 115px; /*Height should enough to fit largest content's height*/
  margin: 5px;
  margin-top:0;
}
 
.stepcarousel .belt{
  position: absolute; /*leave this value alone*/
  left: 0;
  top: 0;
}
 
.stepcarousel .panel{
  float: left; /*leave this value alone*/
  overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
  margin: 10px; /*margin around each panel*/
  width: 120px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
 
.stepcarousel .panel img {
  padding: 2px;
  background: #fff;
}

6) Check your template root folder to have needed js files: jquery.js and stepcarousel.js.

indexu.com » slider

How to make slider work for your template