PDA

View Full Version : Anythinslider navigationFormatter



Mejse78
04-24-2012, 09:21 PM
I've been trying this out:

AnythingSlider (https://github.com/meancode/mt-plugin-anythingslider/tree/master/AnythingSlider-1.3.5)
- just setting up as it is; just to see if i can figure it out. (So I downloaded it all.)


I deleted the first slider, and just called the other one #slider1
I just have ONE problem..
I can't seem to figure out where to change the navigationFormatter..
(Want to be able to give the tabs names, instead of numbers 1-5)

I found an article about this, where it said, that I should use this:

navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
}

But if I use this in here (index.html):

$('#slider1').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null, // Details at the top of the file on this use (advanced use)
forwardText: "»", // Link text used to move the slider forward
backText: "«", // Link text used to move the slider back
buildArrows: false, // If true, builds the forwards and backwards buttons
resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
width: 800 // Override the default CSS width
});

I get an syntaxerror.

Can you help me regarding this?

jscheuer1
04-26-2012, 05:27 AM
This:



navigationFormatter: null, // Details at the top of the file on this use (advanced use)

Implies you want no navigationFormatter function. If that's the case it's probably best to just skip it entirely.

You could also try:


navigationFormatter: function(){}, // Details at the top of the file on this use (advanced use)

Mejse78
04-26-2012, 07:35 PM
Hi again.
I tried putting on the top - but don't know where..
Can you help me with that?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>AnythingSlider</title>

<link rel="stylesheet" href="css/slider/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider/anythingslider.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.2.js"></script>
<script src="js/slider/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

function formatText(index, panel) {
return index;
}

$(function () {

$('#slider1').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null, // Details at the top of the file on this use (advanced use)
forwardText: "&raquo;", // Link text used to move the slider forward
backText: "&laquo;", // Link text used to move the slider back
buildArrows: false, // If true, builds the forwards and backwards buttons
resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
width: 800 // Override the default CSS width
});

$('#slider2').anythingSlider({
resizeContents: false,
autoPlay: false,
width: 600, // if resizeContent is false, this is the default width if panel size is not defined
height: 350 // if resizeContent is false, this is the default height if panel size is not defined
})


$("#slide-jump").click(function(){
$('.anythingSlider').eq(1).anythingSlider(4);
return false;
});

});
</script>
</head>

<body>

<div id="page-wrap">
<a href="http://github.com/ProLoser/AnythingSlider" id="dl">Download Latest on Github</a>

<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>, based upon lots of smart stuff by <a href="http://jqueryfordesigners.com/">Remy Sharp</a>,<br />
significantly improved by <a href="http://pixelgraphics.us/">Douglas Neiner</a></h5>

<h1>AnythingSlider</h1>


<!-- AnythingSlider #2 -->
<ul id="slider1">

<li class="panel1">
<div id="textSlide">
<img src="images/slider/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 src="images/slider/slide-tele-1.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 id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>

<li class="panel5">
<img src="images/slider/slide-tele-2.jpg" alt="" />
</li>

</ul> <!-- END AnythingSlider #2 -->


<h2>Features</h2>
<ul>
<li>Slides are HTML Content (can be anything)</li>
<li>Optional Next Slide / Previous Slide Arrows</li>
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of slides)</li>
<li>Optional custom function for formatting navigation text</li>
<li>Auto-playing (optional feature, can start playing or stopped)</li>
<li>Each slide has a hashtag (can link directly to specific slides)</li>
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide)</li>
<li>Multiple sliders allowable per-page</li>
<li>Pauses slideshow autoPlay on hover (option)</li>
<li>Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web)</li>
<li>Link to specific slides from static text links (<a href="#" id="slide-jump">Slide 4</a> in second example)</li>
<li>Optionally autoPlay once through, stopping on the last page</li>
</ul>


<h2>Usage &amp; Options (defaults)</h2>
<pre>$('.anythingSlider').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: null, // Details at the top of the file on this use (advanced use)
forwardText: "&amp;raquo;", // Link text used to move the slider forward
backText: "&amp;laquo;", // Link text used to move the slider back
width: null, // Override the default CSS width
height: null, // Override the default CSS height
buildArrows: true, // If true, builds the forwards and backwards buttons
resizePanel: true // If true, solitary images in the panel will expand to fit the panel
});</pre>

<h3>Linking directly to slides</h3>
<pre>$("#slide-jump").click(function(){
$('.anythingSlider').eq(1).anythingSlider(4);
});</pre>

<h2>Changelog</h2>

<h3>Version 1.3.5</h3>
<ul>
<li>Added resizePanel option - does not support percentage sizing.<br><br>
<ul>
<li>When true, it will resize all panels & solitary content to the size settings (CSS or the script options).</li>
<li>When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).</li>
</ul>
</li>
<li>Fixed keyboard navigation to work with multiple AnythingSliders on a page.</li>
<li>Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.</li>
</ul>

<h3>Version 1.3.4</h3>
<ul>
<li>Added keyboard navigation</li>
<li>Embeded objects will now resize to fit the panel</li>
<li>YouTube videos will pause the video when it is not in view and play (if already started) when in view (in non-IE browsers)<br>
*Note: this feature only works when the files are hosted on a webserver as the flash player restricts calls between local files and the internet.
</li>
<li>Modified code according to JSLint & added minified version.</li>
</ul>

<h3>Version 1.3.3</h3>
<ul>
<li>Previous / Next arrows are now optional</li>
<li>Clicking start button immediately begins transition instead of waiting for the delay</li>
</ul>

<h3>Version 1.3.2</h3>
<ul>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Dimensions can be passed via javascript or modified at the top of the css file</li>
<li>Merged all Github forks</li>
<li>Wrapper DIVs (&lt;div class="anythingSlider"&gt;&lt;div class="wrapper"&gt;) no longer required in html. Divs are generated in jquery</li>
<li>Improved CSS scope and classes, Javascript degredation is handled differently now however</li>* Greatly refactored CSS for a more fluid resizing behavior
<li>Hash URLS now work for multiple panels</li>
</ul>

<h3>Version 1.3</h3>
<ul>
<li>Accessibility improvements by Matt Lawson</li>
<li>Some generic JavaScript/HTML/CSS code cleaning</li>
<li>Moved to GitHub entirely</li>
<li>Ensures unique panel ID's</li>
<li>Removes navigation if there is only one panel</li>
<li>Added option to stop on the last page when autoPlay is set to true</li>
</ul>

<h3>Version 1.2</h3>
<ul>
<li>Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.</li>
</ul>

<h3>Version 1.1</h3>
<ul>
<li>Changed default easing to "swing" so didn't depend on any other plugins</li>
<li>Removed extra junk (other plugins used for design, etc)</li>
<li>Added Pause on Hover option</li>
<li>Added options for passing in HTML for the start and stop button</li>
<li>Added option to use custom function for formatting the titles of the navigation</li>
<li>Added public interface for linking directly to certain slides</li>
</ul>

<h3>Version 1.0</h3>
<ul>
<li>First version</li>
</ul>

</div>

</body>

</html>

jscheuer1
04-27-2012, 12:39 AM
Just get rid of this line:



navigationFormatter: null, // Details at the top of the file on this use (advanced use)

Mejse78
04-27-2012, 07:54 AM
Hi - and thank you for taking your time to help me out.
I'm just learning this, and I'm struggeling with it.

As far as I understand, the navigationFormatter is the one that gives me the opportunity to change the "title" of the green panels on the bottom of the slider.. isn't that correct? (Or am I way off?)

http://i1086.photobucket.com/albums/j447/Mejse78/Untitled-2.gif

I would like to be able to call them something else than 1,2,3 etc.
Can you help me how to do this? What to write - and where. (cause I've tried so many things, but can't get it right.)

Thank you again,

jscheuer1
04-27-2012, 03:08 PM
OK, I get it. I thought you were just trying to get rid of the error.

If we're to take the instructions' advice we can do like so:


<script type="text/javascript">

var slider1 = ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
return slider1[index - 1] || index;
}

$(function () {

$('#slider1').anythingSlider({
easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: false, // This turns off the entire FUNCTIONALY, not just if it starts running or not
startStopped: false, // If autoPlay is on, this can force it to start stopped
delay: 3000, // How long between slide transitions in AutoPlay mode
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Start", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText, // Details at the top of the file on this use (advanced use)
forwardText: "&raquo;", // Link text used to move the slider forward
backText: "&laquo;", // Link text used to move the slider back
buildArrows: false, // If true, builds the forwards and backwards buttons
resizeContents: true, // If true, solitary images in the panel will expand to fit the panel
width: 800 // Override the default CSS width
});

$('#slider2').anythingSlider({
resizeContents: false,
autoPlay: false,
width: 600, // if resizeContent is false, this is the default width if panel size is not defined
height: 350 // if resizeContent is false, this is the default height if panel size is not defined
})


$("#slide-jump").click(function(){
$('.anythingSlider').eq(1).anythingSlider(4);
return false;
});

});
</script>

If that works, good. But I would favor something less global. Try that out though because it's what the author recommends/uses on his demo page. Making it less global might be complicated and would only be necessary if there were some kind of conflict or if you wanted to configure the labels for the buttons in each li that they represent.

Mejse78
04-29-2012, 06:01 PM
Thank you, thank you, thank you SO much.

This worked! ♥

Mejse78
04-29-2012, 06:07 PM
EDIT: it worked

Mejse78
04-29-2012, 07:16 PM
EDIT: It worked afterall :D