[SOLVED] JQuery Slider in Template.

[JiiPee]

Now I have the code that you give in Page Specific Metadata, so its in the head section only.

If I click (in Firefox 3) navigation link itself repeatedly, it will load itself just fine but if I click page refresh from browser it will expand horizontally. Also sometimes it misplaces the images and they dont align nicely in the slider div.

[uniqu3]

Did you change anything in the js code? There is the same issue in Chrome.

[JiiPee]

I only changed default image paths in js.slider to be like: src="uploads/easyslider/images/01.jpg" Reduce image size and change equal width and height to css.

[uniqu3]

When i am on your site wih Chrome, all examples have same problem.
I didnt start on that project yet, but i will try this on my local installation as soon as i get some time.

[JiiPee]

Hi uniqu3, any update on this one? Or anyone else?

I can not seem to figure it out, too bad. It seems that the width is expanding too wide, but there is no setting for width in the css? Or does the images set the width?

I get it right in the plain website but when I try to import it into cmsms it dont work.

[uniqu3]

Ok it's been a long time since i posted in the forum but as promised ill show you how i implemented jQuery slider in a template with editing function.

First of all i have decided to use News module instead of Album since the slider was planed to display latest News and album would not make any sense.

The first thing you will need is jQuery Library in your Template http://www.jquery.com or simply implement it from google like this:

Code: Select all

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>

Then add the slider Script it can be found at SixRevisions Blog or copy the code Here and save it as portfolioslider.js or any name you wish.

Code: Select all

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 948; // Change the width to your needs
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});

After that we place following in our Template where we want our News Summry displayed:

Code: Select all

<div id="slideshow">
<div id="slidesContainer">{news summarytemplate='slider'}</div>
</div>

Now our Template file is ready and we move on to CSS.

Code: Select all

/* i know i used to many DIVs but oh well i wrapped the news one more time */
#slideshow {
	margin:0 auto;
	width:948px;  /* you can change the width and height to your needs */
	height:211px;
	background: url('uploads/Huber/pageTeaser.gif') no-repeat; /* just a background from my example page */
	position:relative;
}

#slideshow #slidesContainer {
  margin:auto;
  width:948px;
  height:211px;
  overflow:auto;
  position:relative;

}
#slideshow #slidesContainer .slide {
  width:928px;
  height:211px;
  padding-top:5px;
}

.control {
  display:block;
  width:11px;
  height:22px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

/* Control buttons to scroll to left or right */

#leftControl {
  top:100px;
  left:-11px;
  background:url('uploads/Huber/controlLeft.gif') no-repeat 0 0;
}

#rightControl {
  top:100px;
  right:-10px;
  background:url('uploads/Huber/controlRight.gif') no-repeat 0 0;
}

/* my styling of News Sumary, title, text, buttons etc */

.slide h2, .slide h2 a {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color:#fdcb02;
  text-decoration:none;
  letter-spacing:-1px;
}

.slide p{
 font:italic 12px Georgia, "Times New Roman", Times, serif;
 color:#606060;
 margin-right:5px;}
 
.slideImage {
  float:left;
  margin:5px;
  border: 5px solid #dcdbdb;
}

.moreButton{
 width:122px;
 height:40px;
 display:block;
 float:left;
 text-align:center;
 margin-top:5px;
 background: url('uploads/Huber/weiterButton.png') no-repeat center;}
 
 .moreButton a {
 color:#fff;
 font-size: 12px;
 text-decoration:none;
 line-height:40px;
 }
 
  .moreButton a:hover {
 color:#fdcb02;}
 

Well this all about CSS all we need to do now is change our News Summary Template, i named it Slider as you can see above {news summarytemplate='slider'} 

Code: Select all

<!-- Start News Display Template -->
{if $pagecount > 1}
  <p>
{if $pagenumber > 1}
{$firstpage} {$prevpage} 
{/if}
{$pagetext} {$pagenumber} {$oftext} {$pagecount}
{if $pagenumber < $pagecount}
 {$nextpage} {$lastpage}
{/if}
</p>
{/if}
{foreach from=$items item=entry}
<div class="slide">
{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
        {if $field->type == 'file'}
          <img class="slideImage" src="{$entry->file_location}/{$field->value}"/>
        {else}
          {$field->name}: {eval var=$field->value}
        {/if}
  {/foreach}
{/if}
<h2>
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</h2>
{if $entry->summary}
	<div class="NewsSummarySummary">
		{eval var=$entry->summary}
	</div>

	<div class="moreButton">{$entry->morelink}</div>

{else if $entry->content}

	<div class="NewsSummaryContent">
		{eval var=$entry->content}
	</div>
{/if}

{if isset($entry->extra)}
    <div class="NewsSummaryExtra">
        {eval var=$entry->extra}
	{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue} *}
    </div>
{/if}
</div>
{/foreach}
<!-- End News Display Template -->

So thats it we have a nice sliding News Summary in our Template, you can see a working example here