The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Jquery "Anything Slider" code problem

View previous topic View next topic Go down

Jquery "Anything Slider" code problem

Post by venu238 on May 22nd 2011, 6:17 pm

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..
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="http://img850.imageshack.us/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="http://img200.imageshack.us/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="http://img856.imageshack.us/img856/5819/slidetele2.jpg" alt="" />
</li>
</ul>

</body>

I got this code by following "demo2" tutorial (download the attachment for the tutorial)
Attachments
demos.zip Open the zip file, you can see demos.htmlYou don't have permission to download attachments.(8 Kb) Downloaded 11 times

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

Re: Jquery "Anything Slider" code problem

Post by Gangstar15 on May 22nd 2011, 7:44 pm

You can't host CSS in HTML pages Smile
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 Smile

Gangstar15
Forumember

Female Posts : 392
Reputation : 163

http://www.designdrops.net/

Back to top Go down

Re: Jquery "Anything Slider" code problem

Post by venu238 on May 22nd 2011, 8:26 pm

@Gangstar15 wrote:You can't host CSS in HTML pages Smile
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 Smile
can you rewrite the code for me please

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

Re: Jquery "Anything Slider" code problem

Post by venu238 on May 28th 2011, 12:20 pm

@Gangstar15 wrote:You can't host CSS in HTML pages Smile
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 Smile
It is not working
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="http://img850.imageshack.us/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="http://img200.imageshack.us/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="http://img856.imageshack.us/img856/5819/slidetele2.jpg" alt="" />
</li>
</ul>

</body>
What wrong did i do?

venu238
Forumember

Male Posts : 109
Reputation : 0
Language : English
Location : Hyderabad

http://medico.forum.com.bz

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum