Home1
Jquery "Anything Slider" code problem Sun May 22, 2011 11:21 pm
venu238
Registered Member
Posts : 13
Points : 13
Age : 35
Location : Hyderabad, AP, India
Browser :
I'm trying to get Anything Slider on my html page..
I worked out whole 1 day for the code and the final result is :...:
I just got few still images..Thats it!!!
Check out my code and tell me the mistake i did..
I got this code by following "demo2" tutorial (download the attachment for the tutorial)download
I worked out whole 1 day for the code and the final result is :...:
I just got few still images..Thats it!!!
Check out my code and tell me the mistake i did..
- Spoiler:
- <head>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#slider2') // Demo 2 code, using FX full control
.anythingSlider({
width : 600,
height : 350,
startStopped : true,
resizeContents : false,
navigationFormatter : function(i, panel){
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
}
})
.anythingSliderFx({
// base FX definitions can be mixed and matched in here too.
'.fade' : [ 'fade' ],
// for more precise control, use the "inFx" and "outFx" definitions
// inFx = the animation that occurs when you slide "in" to a panel
inFx : {
'.textSlide h3' : { opacity: 1, top : 0, duration: 400, easing : 'easeOutBounce' },
'.textSlide li' : { opacity: 1, left : 0, duration: 400 },
'.textSlide img' : { opacity: 1, duration: 400 },
'.quoteSlide' : { top : 0, duration: 400, easing : 'easeOutElastic' },
'.expand' : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
},
// out = the animation that occurs when you slide "out" of a panel
// (it also occurs before the "in" animation)
outFx : {
'.textSlide h3' : { opacity: 0, top : '-100px', duration: 350 },
'.textSlide li:odd' : { opacity: 0, left : '-200px', duration: 350 },
'.textSlide li:even' : { opacity: 0, left : '200px', duration: 350 },
'.textSlide img' : { opacity: 0, duration: 350 },
'.quoteSlide:first' : { top : '-500px', duration: 350 },
'.quoteSlide:last' : { top : '500px', duration: 350 },
'.expand' : { width: '10%', top: '50%', left: '50%', duration: 350 }
}
});
});
</sript>
<!-- Anything Slider optional plugins -->
<script src="http://medico.forumotion.com/h10-jqueryeasing12js" type="text/javascript"></script>
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="http://medico.forumotion.com/h11-swfobjectjs" type="text/javascript"></script>
<!-- Anything Slider -->
<link href="http://medico.forumotion.com/h12-anythingslidercss" type="text/css" rel="stylesheet" />
<script src="http://medico.forumotion.com/h9-jqueryanythingsliderminjs" type="text/javascript"></script>
<!-- Anything Slider optional FX extension -->
<script src="http://medico.forumotion.com/h8-jqueryanythingsliderfxminjs" type="text/javascript"></script>
</head>
<body>
<ul id="slider2">
<li class="panel1">
<div class="textSlide">
<img src="https://2img.net/r/ihimizer/img850/4030/251356.jpg" alt="tomato sandwich" style="float: right;
margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of
the heavens like an ambered chariot towards the ebon void of infinite space
wherein the tethered belts of Jupiter and Mars hang forever festooned in
their orbital majesty. And as I looked at all this I thought... I must put
a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>
<li class="panel3">
<img class="expand" src="https://2img.net/r/ihimizer/img200/1036/slidetele1.jpg" alt="" />
</li>
<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way.
On the web, you’re talking to someone you’ve probably
never met – so it’s important to be clear and precise.
Thus, well structured navigation and content organization goes hand in hand
with having a good conversation.</blockquote>
<p>
- <a href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a>
</p>
</div>
</li>
<li class="panel5">
<img class="fade" src="https://2img.net/r/ihimizer/img856/5819/slidetele2.jpg" alt="" />
</li>
</ul>
</body>
I got this code by following "demo2" tutorial (download the attachment for the tutorial)download
