WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Jquery "Anything Slider" code problem on Sun May 22, 2011 11:21 pm

venu238


Registered Member
Registered Member
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)download

2 Re: Jquery "Anything Slider" code problem on Wed May 25, 2011 4:08 am

Drogba921


Registered Member
Registered Member
try removing the Comment around the GoogleApis JS code.

http://www.codinghelp.org

3 Re: Jquery "Anything Slider" code problem on Sat May 28, 2011 5:23 pm

venu238


Registered Member
Registered Member
Drogba921 wrote:try removing the Comment around the GoogleApis JS code.
I tried no use
please can anyone restructure the code please

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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