Anything Slider updating the code.

[paaljoachim]

I have been using the Anything Slider for a while and noticed recently that a lot of changes have been made.

The thing is that there is so much code to go through that updating the old code that I use with the new code is a mind bender for me. The old saying if it works do not fix it, well I have a few adjustments that I want to make, so an update is needed.

I am using 12 embeded video tutorials and use the green clickable tabs beneath them. Having 12 tabs using the existing code that I have it looked like this: http://sunwindcreation.com/upload/anythingslider.html (I have redone the page to show the before and after version.)
I have a general header WordPress Tutorials. Each slide also has their own unique header text. Below the slides I have content that relates to the slide.

I was told to check out the second demo on this page: http://proloser.github.com/AnythingSlider/
The demo contains left and right tab arrows to scroll through the tabs.
I added the navigationSize : 7,
to my old code and it worked. But the current tab is not active though.

I am looking to refresh and correct my code. Tighten and update it.

In the head tag area:

bracket-style type=”text/css”-endbracket
#slider1 h2, #slider1 .content { display: none; }
#slider1 img.mainImage { height: 100%; width: 100%; }

h2.title { text-align: center; }
#panelInfo { width: 80%; min-height: 100px; margin: 20px auto; }

.insidecontent {
width: 100%;
height: 100%;
padding: 15px 10px 15px 10px;
border:groove thin #999;
}
bracket-/style>

bracket-!– Anythingslider —>
bracket-link rel=”stylesheet” href=”../js/anythingslider/anythingslider.css” type=”text/css” media=”screen” >bracket-script>
bracket-script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”>bracket-script>
bracket-script type=”text/javascript” src=”../js/anythingslider/jquery.anythingslider.js” charset=”utf-8″>bracket-script>
bracket-!– Optional —>
bracket-script type=”text/javascript” src=”../js/anythingslider/jquery.easing.1.2.js”>bracket-script>
bracket-script type=”text/javascript” src=”../js/anythingslider/swfobject.js”>bracket-script>

bracket-script type=”text/javascript”>

$(document).ready(function() {
$(‘#slider1’).anythingSlider({
autoPlay: false, /* turns off slide show feature */
width: 640,
height: 510,
enableKeyboard : false,
navigationSize : 7, // Set this to the maximum number of visible navigation tabs; false to disable
navigationFormatter : function(i, panel){
return ;
},
onSlideComplete: function(el){
updatePanelInfo(el);
},
onInitialized: function(e,el){
updatePanelInfo(el);
}

});

function updatePanelInfo(el){
var panel = el.$currentPage;
$(‘h2.title’).html( panel.find(‘h2’).html() );
$(‘#panelInfo’).html( panel.find(‘.anythingslidercontent’).html() );
};

});
bracket-/script>

In the body:

bracket-!– BEGIN AnythingSlider –>
bracket-div id=”slidermenu”>
bracket-div class=”titleheadings”>bracket-h1 align=”center”>WordPress Tutorials bracket-/h1>bracket-/div>
bracket-/div>
bracket-h2 class=”title”>Panel Title bracket-/h2>

bracket-!– First slide –>
bracket-li> bracket-h2>How to install MAMP and WordPressbracket-/h2>
bracket-iframe title=”YouTube video player” width=”640″ height=”510″
src=”http://www.youtube.com/embed/3HJnV9KNIXc” frameborder=”0″ allowfullscreen>bracket-/iframe>
bracket-div class=”anythingslidercontent”>
bracket-div class=”space”>bracket-/div>

bracket-div class=”insidecontent”>
bracket-h2>How to install MAMP and WordPress bracket-/h2>
bracket-p> Check out the WordPress page for additional videosbracket-/p>
bracket-p>  bracket-/p>
……etc….
bracket-/div>
bracket-/div>
bracket-/li>

bracket-/ul>

…bracket-/div>
bracket-!– END AnythingSlider #1 –>

bracket-/div>

This is the code that I use. I am hoping for an update of the code in a simple way since I am more of a designer and not so much a programmer. When I get it, or atleast have an understanding of how it works I can create a tutorial which I will add to http://www.easywebdesigntutorials.com.

Thanks!

Paal Joachim

[paaljoachim]

I have uploaded Anything Slider to
http://www.easywebdesigntutorials.com/cms/cms.html

[Author]

Posts