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