Jquery "Anything Slider" code problem
2 posters
Page 1 of 1
Jquery "Anything Slider" code problem
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)
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.forum.com.bz/h10-jqueryeasing12js" type="text/javascript"></script>
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="http://medico.forum.com.bz/h11-swfobjectjs" type="text/javascript"></script>
<!-- Anything Slider -->
<link href="http://medico.forum.com.bz/h12-anythingslidercss" type="text/css" rel="stylesheet" />
<script src="http://medico.forum.com.bz/h9-jqueryanythingsliderminjs" type="text/javascript"></script>
<!-- Anything Slider optional FX extension -->
<script src="http://medico.forum.com.bz/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)
- Attachments
Re: Jquery "Anything Slider" code problem
You can't host CSS in HTML pages
The dollar sign is replace with & # 3 6 ;, so you need to paste the dollar sign alone and save then paste the whole script again
The dollar sign is replace with & # 3 6 ;, so you need to paste the dollar sign alone and save then paste the whole script again
Re: Jquery "Anything Slider" code problem
can you rewrite the code for me pleaseGangstar15 wrote:You can't host CSS in HTML pages
The dollar sign is replace with & # 3 6 ;, so you need to paste the dollar sign alone and save then paste the whole script again
Re: Jquery "Anything Slider" code problem
It is not workingGangstar15 wrote:You can't host CSS in HTML pages
The dollar sign is replace with & # 3 6 ;, so you need to paste the dollar sign alone and save then paste the whole script again
Here is the code
- 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.forum.net.bz/h3-easing" type="text/javascript"></script>
<!-- swfobject.js -->
<script src="http://medico.forum.net.bz/h4-swf" type="text/javascript"></script>
<!-- Anything Slider -->
<!--- link sheet: Anything Slider.css --->
<style type="text/css">
/*
AnythingSlider v1.5.10+ Default (base) theme
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {
display: block;
width: 700px;
height: 390px;
margin: 0 auto;
overflow: hidden; /* needed for Opera and Safari */
}
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
color: #000;
}
div.anythingSlider .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
div.anythingSlider .start-stop {
background-color: #040;
color: #fff;
}
div.anythingSlider .start-stop.playing {
background-color: #800;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #ddd;
}
/* Active State */
div.anythingSlider.activeSlider .anythingWindow {
border-color: #7C9127;
}
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider .start-stop {
background-color: #080;
color: #fff;
}
div.anythingSlider .start-stop.playing {
background-color: #d00;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #fff;
}
/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}
/* anythingSlider base UL */
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}
/* Navigation Arrows */
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin: -60px 0 0 0; /* half height of image */
width: 45px;
text-align: center;
outline: 0;
background: url(../images/arrows-default.png) no-repeat;
}
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
div.anythingSlider .back.disabled { display: none; }
/* Navigation Links */
div.anythingSlider .anythingControls { outline: 0; display: none; }
div.anythingSlider .thumbNav { margin: 0; padding: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .thumbNav a:hover {
background-image: none;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */
div.anythingSlider.rtl .anythingWindow {
direction: ltr;
unicode-bidi: bidi-override;
}
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
background-position: center top;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .thumbNav a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
transition-duration: 0;
-o-transition-duration: 0;
-moz-transition-duration: 0;
-webkit-transition-duration: 0;
}
</style>
<script src="http://medico.forum.net.bz/h2-min" type="text/javascript"></script>
<!-- Anything Slider optional FX extension -->
<script src="http://medico.forum.net.bz/h1-fxmin" 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>
Similar topics
» Jquery slider help
» jQuery image slider
» jquery image slider
» jQuery slider on Forumotion
» Jquery Image Slider
» jQuery image slider
» jquery image slider
» jQuery slider on Forumotion
» Jquery Image Slider
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum