hello,
in my wordpress theme I put jquery slider which contain customer feedback
first when i design the theme in html/css the slider works perfectly .
but when Iconvert html/css to wordpress theme the slider stop working!
this is the code that relate to the slider :
in header.php:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 234;
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 left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move 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() }
}
});
</script>
in about.php :
<div id="slideshow">
<div id="slidesContainer">
<?php $args = array(
'category_name' => 'feedback',
'orderby' => 'date',
'order' => 'ASC'
);
query_posts( $args );?>
<?php while (have_posts()) : the_post(); ?>
<div class="slide">
<div><?php the_content(); ?></div>
<div ><?php the_title(); ?></div>
</div>
<?php endwhile; ?>
</div>
</div>
in style.css:
#slideshow {
margin:0 auto;
width:254px;
height:180px;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:234px;
height:180px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:214px; /* reduce by 20 pixels to avoid horizontal scroll */
height:180px;
color:#663399;
}
.control {
display:block;
width:52px;
height:52px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
margin-top:35%;
margin-bottom:35%;
}
#leftControl {
top:0;
left:0;
margin-left:-40px;
background:transparent url(images/control_left.png) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
margin-right:-40px;
background:transparent url(images/control_right.png) no-repeat 0 0;
}
