Oh this is the template .php file if it helps...
<?php
/*
*
Template Name: Full Screen Slider
*
*/
?>
<?php get_header(); ?> <!-- Header -->
<?php while(have_posts()): the_post(); ?>
<div role="main" class="full-width-container container full-screen-slider" id="main" data-animation="fade"> <!-- Start Main -->
<?php $args = array(
'post_type' => 'attachment',
'numberposts' => null,
'post_status' => null,
'post_parent' => get_the_ID()
);
$attachments = get_posts($args);
?>
<div id="tf_loading" class="loading"></div>
<div id="tf_bg" class="tf_bg">
<?php
if ($attachments) {
foreach ($attachments as $attachment) {
$image_attributes = wp_get_attachment_image_src( $attachment->ID,'full');
if($attachment->post_excerpt)
echo '<a href="'.$attachment->post_excerpt.'"><img src="'.$image_attributes[0].'" alt="Image 1" /></a>';
else {
echo '<img src="'.$image_attributes[0].'" alt="Image 1" />';
}
}
}
?>
</div>
<div class="fullscreen_slider_thumbnail">
<?php
if ($attachments) {
$i = 0;
foreach ($attachments as $attachment) {
if($i == 0 )
echo "<a href='#' data-index='".$i."' class='show_index current_index'></a>";
else
echo "<a href='#' data-index='".$i."' class='show_index'></a>";
$i= $i+1;
}
}
?>
</div>
<div id="tf_content_wrapper" class="tf_content_wrapper">
<?php
if ($attachments) {
foreach ($attachments as $attachment) {
echo '<div class="tf_content" id="content1 page-title" style="display:block;">';
if($attachment->post_title !='' && !(is_numeric($attachment->post_title))){
echo '<h2 class="alt_bg_color">'. $attachment->post_title.'</h2>';
}
if($attachment->post_content !=''){
echo '<p>'.$attachment->post_content.'</p>';
}
echo '</div>';
}
}?>
</div>
<div id="tf_next" class="tf_next alt_bg_color">e</div>
<div id="tf_prev" class="tf_prev alt_bg_color">j</div>
<?php endwhile; ?>
<?php ?>
</div> <!-- End Main -->
<script type="text/javascript">
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options);
o = $.meta ? $.extend({}, opts, this.data()) : opts;
var c = this.length,
l = 0;
return this.each(function() {
var $i = jQuery(this);
jQuery('<img/>').load(function(i){
++l;
if(l == c) o.onComplete();
}).attr('src',$i.attr('src'));
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function() {
var $tf_bg = jQuery('#tf_bg'),
$tf_bg_images = $tf_bg.find('img'),
$tf_bg_img = $tf_bg_images.eq(0),
total = $tf_bg_images.length,
current = 0,
$tf_content_wrapper = jQuery('#tf_content_wrapper'),
$tf_next = jQuery('#tf_next'),
$tf_prev = jQuery('#tf_prev'),
$tf_loading = jQuery('#tf_loading');
var show_index_number;
var animate_type = jQuery('.container').attr('data-animation');
//preload the images
$tf_bg_images.preload({
onComplete : function(){
$tf_loading.hide();
init();
}
});
//shows the first image and initializes events
function init(){
//get dimentions for the image, based on the windows size
var dim = getImageDim($tf_bg_img);
//set the returned values and show the image
$tf_content_wrapper_padding = parseInt($tf_bg_img.css('height'))-20;
$tf_content_wrapper.find('div:not(:first-child)').css('display','none');
if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_content_wrapper_padding+'px'); }
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
//top : dim.top
}).fadeIn();
$tf_content_wrapper.fadeIn();
//resizing the window resizes the $tf_bg_img
jQuery(window).bind('resize',function(){
if(jQuery(window).width() > 767){
var dim = getImageDim($tf_bg_img);
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
//top : dim.top
});
}
else{
jQuery('.full-width-container').css('padding-top','0');
resize($tf_bg_img);
$tf_content_wrapper.css('padding-top',(parseInt($tf_bg_img.css('height'))-20));
}
});
jQuery(window).load(
function(){
if(jQuery(window).width() < 767){
$tf_bg_images.each(function(){
resize($tf_bg_img);
});
}
if(jQuery(window).width() > 767){
if($tf_bg_img.is(':animated'))
return false;
var dim = getImageDim($tf_bg_img);
$tf_bg_img.animate({
width : dim.width,
height : dim.height,
//top : dim.top,
left : dim.left
},350);
}
});
//click the arrow down, scrolls down
$tf_next.live('click', function(){
if($tf_bg_img.is(':animated'))
return false;
if(animate_type == "fade")
fade_scroll('tb');
else
slide_scroll('tb');
});
//click the arrow up, scrolls up
$tf_prev.live('click', function(){
if($tf_bg_img.is(':animated'))
return false;
if(animate_type == "fade")
fade_scroll('bt');
else
slide_scroll('bt');
});
jQuery('.show_index').click(function(e){
e.preventDefault();
if(jQuery(this).hasClass('current_index'))
return false;
show_index_number = parseInt(jQuery(this).attr('data-index'));
if(animate_type == "fade")
fade_scroll('index');
else
slide_scroll('index');
});
jQuery(document).keydown(function(e){
if($tf_bg_img.is(':animated'))
return false;
switch(e.keyCode){
case 37:
if(animate_type == "fade")
fade_scroll('bt');
else
slide_scroll('bt');
break;
case 39:
if(animate_type == "fade")
fade_scroll('tb');
else
slide_scroll('tb');
break;
}
});
setInterval(function() {
fade_scroll('bt');
}, 5000);
}
function update_thumbnail(current) {
jQuery('.fullscreen_slider_thumbnail').find('a').removeClass('current_index');
jQuery('.fullscreen_slider_thumbnail').find('a').eq(current).addClass('current_index');
}
function fade_scroll(dir){
//if dir is "tb" (top -> bottom) increment current,
//else if "bt" decrement it
var before_current = current;
current = (dir == 'tb')?current + 1:current - 1;
if(dir == 'index') {
current = show_index_number;
}
//we want a circular slideshow,
//so we need to check the limits of current
if(current == total) current = 0;
else if(current < 0) current = total - 1;
update_thumbnail(current);
//we get the next image
var $tf_bg_img_next = $tf_bg_images.eq(current);
var $tf_bg_img = $tf_bg_images.eq(before_current);
//hide the current description
$tf_content_wrapper.children(':visible')
.fadeOut();
$tf_bg_img_next.fadeIn(700);
$tf_content_wrapper.children()
.eq(current)
.fadeIn(500);
$tf_bg_img.fadeOut(700);
}
function slide_scroll(dir){
//if dir is "tb" (top -> bottom) increment current,
//else if "bt" decrement it
current = (dir == 'tb')?current + 1:current - 1;
if(dir == 'index') {
current = show_index_number;
}
//we want a circular slideshow,
//so we need to check the limits of current
if(current == total) current = 0;
else if(current < 0) current = total - 1;
update_thumbnail(current);
//we get the next image
var $tf_bg_img_next = $tf_bg_images.eq(current),
//its dimentions
dim = getImageDim($tf_bg_img_next),
//the top should be one that makes the image out of the viewport
//the image should be positioned up or down depending on the direction
left = (dir == 'tb')?jQuery(window).width() + 'px':-parseFloat(dim.width,10) + 'px';
//set the returned values and show the next image
$tf_bg_img_next.css({
width : dim.width,
height : dim.height,
left : left,
}).show();
//the top should be one that makes the image out of the viewport
if(jQuery(window).width() < 767){
resize($tf_bg_img_next);
}
//$tf_bg_img_next.css('left',$tf_bg_img.width());
//now slide it to the viewport
$tf_bg_img_next.stop().animate({left : 0},1000, 'jswing');
//$tf_bg_img_next.css('left',-$tf_bg_img.width());
//we want the old image to slide in the same direction, out of the viewport
var slideTo = (dir == 'tb')?$tf_bg_img.width() + 'px':jQuery(window).width() + 'px';
if(dir == 'tb') {
slideTo = "-"+slideTo;
}
$tf_bg_img.stop().animate({left : slideTo},1000,'jswing',function(){
//hide it
jQuery(this).hide();
//the $tf_bg_img is now the shown image
$tf_bg_img = $tf_bg_img_next;
//show the description for the new image
if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_bg_img.height()); }
$tf_content_wrapper.children()
.eq(current)
.fadeIn(500);
});
//hide the current description
$tf_content_wrapper.children(':visible')
.hide()
}
//animate the image to fit in the viewport
function resize($img){
var w_w = jQuery(window).width(),
w_h = jQuery(window).height(),
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h;
if(i_w > i_h){
new_w = w_w;
new_h = w_w * r_i;
if(new_h > w_h){
new_h = w_h;
new_w = w_h / r_i;
}
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.css({
width : new_w + 'px',
height : new_h + 'px',
});
}
//get dimentions of the image,
//in order to make it full size and centered
function getImageDim($img){
var w_w = jQuery(window).width(),
w_h = jQuery(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
};
}
});
</script>
<?php get_footer(); ?><!-- Footer -->
