Home › Forums › JavaScript › AnythingSlider – Moving caption location
- This topic is empty.
-
AuthorPosts
-
January 13, 2012 at 11:50 am #36093
fightstarr20
MemberI am currently battling with the anythingslider, I have almost managed to make it do what I want!
Heres where I am at so far – http://jsfiddle.net/Cm479/3281/
- For some reason the first caption is not displayed, if you go forward a slide and then back then the caption is displayed correctly.
- I want the caption to display at the bottom on the slide itself, overlaying the image. Currently it is sitting below the slider and I cant work out how to get it to move up.
- I have managed to add a button called ‘Show / Hide Caption’ and it works correctly, clicking it toggles the caption. I am trying to get the tab itself to float to the right but have not been able to manage it.
Can anybody can help with any of the above questions?
January 13, 2012 at 4:56 pm #94564Mottie
MemberHi fightstarr20!
Try this (updated demo). Basically the “onInitialized” function shouldn’t be split into two functions because the last one over-rides all previous ones. And since the captions are contained within the slide, I switched the code to reveal them instead of the caption under the slider.
January 15, 2012 at 11:38 am #94619fightstarr20
MemberThanks for that, everything is working how I wanted it to now :)
February 3, 2012 at 7:23 am #96089fightstarr20
MemberOk i’ve moved on slightly! I would like to move the page number tabs to the top right of the ul instead of them being at the bottom right. I would then like to move the caption to its own box underneath the ul. I am trying to move the tabs first but can’t seem to find any documentation on it, can you point me in the right direction?
February 3, 2012 at 9:01 am #96096Mottie
MemberYou will need to include the “appendControlsTo” option and target an element above the slider. Since the controls are now outside of the slider, you’ll also need to apply custom css to it (demo):
HTML
- ...
Code
var updateCaption = function(slider){
var cap = slider.$currentPage
.find('.caption').fadeIn(200).end()
.siblings().find('.caption').fadeOut(200);
};
$('#slider').anythingSlider({
stopAtEnd: true,
autoPlay : false,
infiniteSlides: false,
appendControlsTo: $('#nav'),
// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
updateCaption(slider);
slider.$controls
.append('')
.find('.show').click(function(){
slider.$currentPage.find('.caption').fadeToggle(200);
});
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
$('#current-caption').fadeOut(200);
},
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) { updateCaption(slider); }
});And the extra css (customize it as desired)
/* navigation css */
#nav { margin: 5px auto; width: 500px; height: 40px; }
#nav li { padding: 4px; float: left; }
#nav a {
display: block;
width: auto;
height: 20px;
background: #999;
padding: 8px;
text-align: center;
text-decoration: none;
color: #fff;
}
#nav a:hover { background: #000; }
#nav a.cur { background: #0080ff; }
#nav a.start-stop { background: #080; }
#nav a.start-stop.playing { background: #800; }There is a demo on the first page of the documentation – you can explore the other demos there to get an idea of what else is possible.
February 3, 2012 at 10:23 am #96100fightstarr20
MemberThanks, that makes it clearer. On a sidenote, I keep seeing issues like this whilst I am developing http://jsfiddle.net/LkTUw/
The page keeps getting longer, can you point out what I am doing wrong?
February 3, 2012 at 11:02 am #96106fightstarr20
MemberOk I have updated the fiddle with where I am at currently. http://jsfiddle.net/srFPm/
The external nav works great so thanks for the guidance on that, my external caption box sort of works but I still have the page getting longer issue
February 3, 2012 at 6:03 pm #96132Mottie
MemberWhen AnythingSlider has the “expand” option set to true, the outer wrapper needs to have a set height. Setting it to 100% of the body is why it keeps increasing.
If you look at this demo (from the main document page) you’ll see how to handle the wrapper css
#wrapper {
width: 100%;
display: block;
position: fixed;
height: auto;
top: 10px;
left: 0;
bottom: 10px;
right: 0;
}
or use “position: absolute” for mobile devices since position:fixed doesn’t work correctly.
February 6, 2012 at 10:10 am #96260fightstarr20
MemberOk im further along, I have ended up modifying the demo above to get rid of the bloat I had aquired on my version!
I know have the caption displaying on every slide, but what I want is the caption to sit underneath, but inside the actual UL itself, not overlayed though. Also for some reason the images are not filling the li. Where am I going wrong?
February 6, 2012 at 1:02 pm #96272Mottie
MemberIf you want the captions inside of the panel, then you should follow the method used in Demo #3… all of the code is in the accordion under the demo.
February 7, 2012 at 5:23 am #96307fightstarr20
MemberSo close! Here is where I am at the moment http://jsfiddle.net/5fNuN/1/
Everything works but on the first slide with the caption the expand contents is being messed up by the caption for some reason. I have set display:none for the .caption but it is still affecting the contents of the li
February 7, 2012 at 9:12 am #96320Mottie
MemberFebruary 10, 2012 at 4:04 am #96508fightstarr20
MemberPerfect, thanks for all your help :)
October 8, 2012 at 4:31 pm #111447tbland
MemberHi. I’m not a JS developer and I’m having the same issue with the first caption. Is there a simple, step-by-step solution for this?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.