I'm a little confused with the next steps to take on a project I'm working on and hopefully you could give me some ideas/help.
http://goo.gl/4d72h
I'm using Wordpress, and a combination of Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) and Masonry (http://masonry.desandro.com/index.html) to create the landing page of this project.
As you can see by visiting the site, each 'post' is wrapped in a grid_6 float, allowing two floats per row, and then I am using masonry to place everything together as it does. I've wrapped the masonry code in a (window).load function to wait until all the featured images have loaded and then it starts the masonry. Pretty straightforward.
<script>
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post'
});
});
});
</script>
However, the masonry is only taking into consideration the first feature image for it's positioning etc. If you click the images, or the dots, it'll advance to the next image which can be longer or shorter in height, which is causing a few problems. Because the masonry has already taken place, it's overlaping with the next post etc. You can see what I mean when you click on the images on the link given above.
So, what I'm after today, is any ideas on how this can be fixed? Can masonry take the height from the tallest image in the slideshow? Can it changes dynamically as the images are clicked? Can I make sure that a margin at the bottom is ALWAYS given on absolute positioned items?
Any ideas would be really appreciated.
Thanks all,
Richard
You slideshow plugin does not seem to expose any event hooks. So you will have to do it the verbose way ..
Change the code where you initialize the masonry plugin to
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post',
isAnimated: true // added this line to make the resizing of the masonry animated and not instant..
});
// whenever we click on a bullet element
$('.pager').on('click','.bullet', function(){
// we use timeout to delay the redrawing of masonry
// because the slideshow takes sometime to fade out the current slide
// and slide in the new one..
// We have to wait until the slideshow has completed its transition before
// redrawing masonry, so that the masonry plugin can use the new slide's dimensions..
setTimeout(function(){
// we make masonry recalculate the element based on their current state.
$container.masonry();
}, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw..
});
});
});
See it live at http://jsfiddle.net/XjVWN/embedded/result/
One thing you could do is to call .masonry('reload') when an image is changed.
Related
Im using isotopes for my page and my divs that have images are overlapping.
This issue is only happening SOMETIMES the first time I access a page on my browswer and ALL the time on phone. It never happens when accessing the page locally though.
I already tried using .imagesLoaded but it doesn't seem to be working.
Any recommendations?
http://orianadesigns.com/4foodesses
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue.
You need to install imagesLoaded.js and then call isotope like this:
var $container = $('#container');
// init
$container.imagesLoaded( function(){
$container.isotope({
// options
itemSelector: '.box',
layoutMode: 'masonry'
});
});
Giving the images a fixed width/height solved this problem for me.
I am trying to append Masonry elements to existing ones.
However, what I currently have is this - the items show before Masonry is initialised then jump into position a second later. I'd like them to be hidden until they're in position.
This is the code (within an infinite scroll plugin) that I'm using to append the Masonry items:
$container.append(data);
$container.imagesLoaded( function()
{
$container.masonry('reloadItems').masonry();
});
And here it is being initialised:
$(document).ready(function ()
{
$container = $('#container');
// initialize the masonry instance
$container.imagesLoaded(function(){
$container.masonry({
columnWidth: 1,
itemSelector: '.item',
transitionDuration: 0
});
});
$('#container').scrollPagination({
nop : 36, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});
UPDATE
Based on Josh's answer, my code now looks like this:
$container.append(data);
$container.imagesLoaded( function()
{
$(".item").show();
$container.masonry('reloadItems').masonry();
});
And I've added <class='hide'> to the item tag.
However, now no elements show up when I refresh the page.
Have them load with the bootstrap hidden class set, and remove it after masonry runs.
If masonry needs them to be visible to do its calculations, have them displayed off-screen when loaded. Z-index, crazy position, etc.
Update
http://masonry.desandro.com/methods.html
So I gave a quick glance at methods here, without this trickery I talked about, I do believe you can ajax-load your new items, then use the masonry.addItems( items ) method.
I'm having issues with jquery and bxslider on my site, i've been racking my brain over this for a while but can't seem to find any way to make it work how i'd like,
I'm building a slider using bxslider and basically i want the current slide to have a class of 'active' or an opacity of 1, whereas i'd want all other images on the sliders to have an opacity of 0.7.
i have a potential 'infinite' number of slides on my page and this is where i seem to be running into problems. (it's being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)
you can see what i've got so far at: http://jsfiddle.net/bu5cd/
$(document).ready(function(){
$('.bxslider').bxSlider({
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('img.attachment-thumbnail-size').removeClass('active');
$('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
}
});
});
you can see it works for the first slider somewhat, but it doesn't carry through to the second slider.
Cheers guys, been racking my brain over this for hours! I'm open to using another slider if that would help achieve the desired result, there doesn't seem to be an awful lot of documentation around for bxslider.
Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the "n-th" img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:
$(document).ready(function () {
$('.bxslider').bxSlider({
onSlideBefore: function ($el) {
/* remove the class from all images of this slider only */
$el.closest(".bxslider")
.find('img.attachment-thumbnail-size')
.removeClass('active');
/* add the class to the image within the current slide */
$el.find('img.attachment-thumbnail-size')
.addClass('active');
}
});
});
http://jsfiddle.net/bu5cd/3/
I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence
Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.
I have a wordpress template that makes use of Coda Slider 1.1.1, and although I have figured out how to make it transition less frequently, I can't figure out how to change the physical speed at which the elements slide across the screen. I'm looking at the coda-slider.1.1.1.pack.js file but can't see it in there...
If you are using Coda slider 1.1.1 pack js.. You can use this code to auto slide :
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider({ continuous:true})
jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
var autoSlide = setInterval(function()
{
jQuery("#stripNavR0 a").click();
}, 6000);
});
Instead of #stripnavR0 a use the id for the div use on right click of your slider.
you can adjust the slide speed with that:
$().ready(function() {
$('#coda-slider').codaSlider({
autoSlide: true,
autoSlideInterval: 4000,
});
});
Cheers,
Stefan