cycle slideshow inside horizontal slider

H

hicky

New Member
Hi, I want to make a jQuery cycle slideshow inside another slideshow, a horizontal slider. They both work fine by themselves but when I put them together one of them won't work, depending on which script i put first. How can i make it work?

</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
</head>
<body>

<div id="header">


<hr>

</div>

<div id="menu">
<a href="#" onClick="Animate2id('#c1'); return false">home</a>
<a href="#" onClick="Animate2id('#c2','easeOutQuint'); return false" >creaties</a>
<a href="#" onClick="Animate2id('#c3','easeOutQuint'); return false" >boeket v/d week</a>
<a href="#" onClick="Animate2id('#c4','easeOutQuint'); return false" >bestellingen</a>
<a href="#" onClick="Animate2id('#c5','easeOutQuint'); return false" >contact</a>

</div>
<div id="container">
<div id="c1">
<div class="content">
<div id="myslides">
<img src="images/capitol.jpg" />
<img src="images/flowers.jpg" />
<img src="images/countryscene.jpg" />
</div>
</div>
</div>
<div id="c2">
<div class="content">Content 2</div>
</div>
<div id="c3">
<div class="content">Content 3</div>
</div>
<div id="c4">
<div class="content">Content 4</div>
</div>

<div id="c5">
<div class="content">
<p>bloemen vandamme
</p>
</div>
</div>
</div>

<div id="footer">
</div>
<script>
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}
</script>
</body>
</html>
 
H

hicky

New Member
well they are not really slideshows, one is a content slider, the main content moves to the right and to the left and on the home page there is fadeIn fadeOut image slider. I hope its a bit clear, my knowledge of html and english isn't all that great. I wanted to add another picture gallery on page 2, but it would've probably loaded to slowly. Somewhere this week the site will be online.
 
H

hicky

New Member
does anyone have an idea how i can position id"Homeslides", so it adjusts itself to every screen size? I can only give it a fixed position. the #c have to have a width of 1500px, otherwise you can see the content of the next page. ( content slider to the right) I have tried float, position absolute, align-text; center for the id "Homeslides." i have been looking for ages but can't see the solution. :(
<body>
<div id="header">
</div>

<div id="container">

<div id="c1">
<div id="Homeslides">
</div>
</div>

<div id="c2">
</div>

<div id="c3">
</div>

<div id="c4">
</div>

<div id="c5">
</div>

<div id="c6">
</div>

</div>
<div id="footer">
</div>

</body>
</html>


html,body{
margin: 0px;
padding: 0px;
height: 100%;
}

body{
overflow: hidden;
text-align: center;
}


#container{
position: relative;
left: 0;
width: 10000px;
top: 0;
height: 100%;
text-align: center;
}

#c1,#c2,#c3,#c4,#c5,#c6 {
width:1500px;
height:100%;
float:left;
margin-right:100px;
position: relative;

}

#Homeslides {
width: 500px;
height: 350px;
margin-top: 100px;
margin-left: 470px;
}
 
You must log in or register to reply here.
Top