I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..
You can see the page here: http://goo.gl/pJLNN
The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?
In order to correct the images positions you need to add or change the absolute position of every image container.
Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.
So in the css put this:
#rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}
To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons
prev: {
button : "#msprev"
},
next: {
button : "#msnext"
},
The same happens to pagination, correct it:
pagination: {
container: '#pager'
}
For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had
prev: {
button : "#prev3"
},
next: {
button : "#next3"
},
There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.
Related
I want to be able to change my navbar position on the fly adjusting remaining content accordingly.
So, I have a functiona website. There is a menu navbar on top by default. What I did is added an 'edit' button to that menu so that when you click it, you get a list of 4 checkboxes with the ability to choose if you want that menu positioned on top (default), left, right or bottom with the other content moving accordingly (e.g menu on the left, content goes slightly right, etc). So basically, I have something like this:
// css for menu positioning to the left
.navbar-left {
width: 25%;
height: auto;
}
.content-right {
position: relative;
left: 200px;
}
// css for menu positioning to the bottom
.navbar-bottom {
position: relative;
bottom: 0;
left: 0;
height: 200px;
}
.content-up {
position: relative;
bottom: 200px;
}
And in JS I do something like this
if($("#left"):checked){
$("#menu-bar").addClass("navbar-left");
$("#content").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").addClass("navbar-bottom");
$("#content").addClass("content-up");
}
Now, I have much more styling than this, but it is irrelevant to the issue at hand. The problem is when I choose 'left' it styles properly but when I change it to 'bottom' after that it still uses the styles from 'left' positioning and adds the new ones to it.
Right now I solved the issue by removing the previous classes with .removeClass() method, like that:
if($("#left"):checked){
$("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
$("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
$("#content").removeClass("content-down").addClass("content-up");
}
Basically, right now I have about a hundred lines of just adding classes of the chosen positioning while removing all the classes of 3 other choices that I added each time.
So, finally the question: Is there any other way to strip all the classes that were used before (just set everything to initial values like when the page was loaded) instead of deleting all these classes by hand?
I haven't ever tried resetting the classes to their initial state, but you can certainly clear them all off of a single element in one line of code:
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
source: https://api.jquery.com/removeclass/
You could probably combine that with the .toggleClass or another method.
If I had to sit down and do it right now, based on my understanding of your question I'd just hide the original elements and add new elements with the classes that you'd like, then to revert delete the new elements and restore the original one.
I suppose this had been answered before, but I couldn't find a similar issue on the web.
I have an img element inside a hidden div (a side menu). It is not hidden actually, it is an absolutely positioned div residing outside of the body borders. When user clicks a button to open the menu, I make use of jQuery's animate to move it back into the viewport by playing with its left property. The setup is as follows:
.menu {
.
.
.
width: 200px;
position: absolute;
left: -200px;
}
When user clicks the button to open the menu, I run this animation:
$('.menu').animate({
left: "+=200"
},
500,
function() {
// stuff here
}
);
The problem is, when this animation is completed, the img inside the menu is pixelated for a short period of time, like 3 seconds, then it renders correctly. This happens everytime I close and open the menu again. How can I solve this?
EDIT
I've prepared a fiddle, but couldn't reproduce the issue in the fiddle. Image renders with no problem in the fiddle. I am posting the link here anyway, maybe that could help to understand the setup. Could the reason be other elements present in the document at the time of the animation? Or could it be about hte size of the image?
http://jsfiddle.net/j5aecuqx/
I have created 3 image galleries based on SlidesJS and placed them inside Twitter Bootstrap Tabs.
You can see the demo here.
As you can see, the galleries are correctly populated and placed inside the tabs; however, the images for the second and third galleries are not displayed.
I'm guessing this might be something with the content of the tabs being hidden and conflicting with the gallery css?
Do you have any solution?
Answer:
Based on the suggestion below, I ended up using it this way:
$(document).ready(function(){
$('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
$("#gallery-tab a").each(function( index ) {
$(this).on('shown', function(){
$('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
});
});
});
The most common problem with most tab scenarios is that you're initializing your galleries when the tabs are hidden, and therefore the plugin cannot calculate sizes and perform other actions on tab child elements which aren't visible.
You can 1) initialize the gallery plugin on tab select, or 2) use something like {position: absolute; left: -999em;} instead of {display: none} to hide tabs.
UPDATE: Based on your comment, this should work...
$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
$('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})
I am using a photo album jQuery plugin (Supersized). It includes a thumbnail tray which slides up from the bottom of the screen at the touch of a button, resulting in the following HTML being created onto the div properties and in firebug css 'element.style. property:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 0px;"
I am trying to place a footer div at the bottom of the page though, so want to move the finishing position to 'bottom:0px'. I have seen that an extra element.style can be added to local CSS but without a 'before' and 'after' type of selection I don't understand if that can help me. Furthermore I don't find the function in the JS files and from what I understand it can't be accessed anyway. I need to change these to be:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 42px;"
Any advice would be most welcome. Thanks
$('#clickedElement').on('click', function() {
$('#element').css('bottom', '42px')
});
If i didn't missunderstand you?
Probably the function which you can not find is jquery .css() function you can read how it works here.
Also if you want to animate some dive you can use jquery .animate() function (docs).
In your case it should looks like:
$('#button').click(function() {
$('#element').animate({
$('#element').css('bottom', '42px');
}, 5000, function() {
});
});
Where 5000 it's time of your animation in miliseconds.
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.