I really am impressed with this plugin and just have one issue that I can't seem to resolve or find a solid fix to on other forums. I would like the audio player element in my posts to respond to device resizing as my current theme does for all the other visual elements. The video player seems to be responding perfectly to resizing for moible, but the audio player runs off the side of the screen. Any insight would be great. Here's the site for reference if needed:
http://ericbvoice.com/category/commercial/
Did you figure it out in the meantime? When I open your links, the players behave responsively. I can't find the javascript code that achieves this? Or did you do it by modifying the CSS?
Best regards - Ulrich
Edit: Have figured out a solution now:
$(document).ready(function () {
var player = new MediaElementPlayer('#audioplayer',
{ pauseOtherPlayers: false,
features: ['playpause', 'current', 'progress', 'duration']
});
player.pause();
player.play();
var inPlayersize = 400;
function resPlayer() {
if ($(window).width() + 20 < inPlayersize) {
player.setPlayerSize($(window).width() - 20, 30);
player.setControlsSize();
}
}
resPlayer();
$(window).resize(function () {resPlayer();});
});
I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!
I'm using two plugins which independently work correctly. Galleriffic and Loupe are the two plugins. What I'm trying to do is have the large image in Galleriffic also have a magnify on hover effect, which is what Loupe is for. I've had to add one line of code newSlide.find('a img').addClass('magnifyPic'); to the Galleriffic plugin in order to get a class on the image, which should be used by Loupe to activate the magnify effect. Below are the two calls for the plugins.
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
'imageContainerSel': '#bigPics',
'enableBottomPager': false,
'renderNavControls': false,
'renderSSControls': false,
'enableHistory': false,
});
$('.magnifyPic').loupe({
'default_zoom': 300,
'shape' : 'rounded',
'default_size' : 160,
'glossy' : false,
'drop_shadow' : false
});
});
The problem is that absolutely nothing happens when I hover over the large image. Independently the two plugins function correctly, but don't seem to want to work together. If I understand it correctly, the Galleriffic plugin can take callback, functions, etc. in its options, so I guess my question is: How do I integrate the Loupe call into the Gallerific call? Or is that the correct way to go about making Loupe work with only the large image in a Galleriffic gallery? I've tried removing, adding, modifying lines of code to both plugins, but can't seem to get them to work together.
Search for image.src in jquery.galleriffic.js. It should appear twice (around line # 338 and # 611). Add the following line after image.src = ...:
image.src = ...
$(image).loupe();
Note: I also added this to my CSS. Before this adding this CSS rule, the loupe was causing very minor enlargement (maybe I am using the plugin wrong?):
.loupe img {
width:800px;
height:800px;
}
I posted the example on github. You can try it out here http://ted-piotrowski.github.com/example-gallerific/
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
I am running jQuery Cycle for an image gallery. View the link: Here
My problem is that the images are getting squished when viewed in firefox. The problem disappears when I re-load the page. This leads me to believe that the Javascript is triggering before all the images are loaded (usually the first image works fine and the rest are squished.)
A hard re-fresh reproduces the problem.
I've wrapped everything in a $(document).ready(function(){ }); but it still happens.
Additional Info: If I specify the width and height of the image, everything works fine. However there are hundreds of images all at different sizes..
I'm pretty frustrated with this problem. Any ideas/help is greatly appreciated!
Here is my code:
$(document).ready(function(){
//function onBefore(curr,next,opts) {
// var $slide = jQuery(next);
// var w = $slide.outerWidth();
// var h = $slide.outerHeight();
// $slide.css({
// marginTop: (482 - h) / 2,
// marginLeft: (560 - w) / 2
// });
//};
// Decare the function that center the images...
function onBefore(curr,next,opts) {
var $slide = jQuery(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (480 - h) / 2,
marginLeft: (560 - w) / 2
});
};
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
next: '#next',
pause: 0,
speed: 500,
before: onBefore,
prev: '#prev',
pause: '#pause',
pager: '.thumbs',
pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
pagerAnchorBuilder: function(idx, slide) {
var src = $('img',slide).attr('src');
//Change height of thumbnail here
return '<li><img src="' + slide.src + '" height="90" /></li>';
}
});});});
There is a much simpler and cleaner solution that I used to solve this problem than what has already been proposed:
Using jQuery, you need to use $(window).load instead of $(document).ready for your particular situation. To fix the issue, change this:
$(document).ready(function() {
$('#slideshow').cycle({
/* ... */
});
});
To this:
$(window).load(function() {
$('#slideshow').cycle({
/* ... */
});
});
Why does this work? Because window.onload fires after all referenced images on the page are loaded (See https://developer.mozilla.org/en/DOM/window.onload, and .load() - jQuery API), which is the desired behavior in your situation. $(document).ready, better known as "DOM Ready", will fire before images have loaded. This is typically the desired behavior, but in your situation it's too early.
I had the same problem when working on a site several months ago (linked below). If you're starting cycle in $(document).ready(), here's what happens when a client browses to your page:
1) The client's browser sends a request for each img element. Those requests take variable amounts of time to fulfill.
2) Before the image requests are completed, cycle starts. Cycle works by hiding all but the first image in the slide show: it sets visibility:hidden and display:none on each of its images.
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none. So if the image hasn't finished loading, its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder). When cycle shows the image by setting its style attribute to display:block, it uses whatever dimensions it had at the time it was hidden.
I solved this by changing my code so that it doesn't start the cycle plugin until all the images are finished loading. To do that, I initialize a counter variable to the number of images I'm cycling, then bind a load event to each image like this:
var imagesRemaining = 12; // 12 is just the number of images in the slideshow div
$(document).ready(function() {
$('#slideshow > img').bind('load', function(e) {
imagesRemaining = imagesRemaining - 1;
if (imagesRemaining == 0) {
// I'm doing some other stuff when initializing cycle
startCycle();
// My images all start with visibility:hidden so they don't show
// before cycle hides them in a 'stack', so ...
$('#slideshow > img').css('visibility', 'visible');
}
});
});
function onBefore(curr, next, opts) { // Your code here ... }
function startCycle() {
$('#slideshow').cycle({ ... // your initialization here });
}
You can see it in action by viewing the galleries on this site in Firefox. I'm building the gallery pages dynamically, so it's structured a bit differently than your page, but you can see more details if you poke around with Firebug.
I'd also like to add that it seems adding a width and height attribute solves this problem.
Ok i know its probably an awfull way of calling load but i just coulnd bind my cycle code to .load for some reason it just don't work so i called the whole Cycle initializer inside the ...
i couldn't force the sizes since i'm cycling through li containing dynamic images and data
its probably flawed at some extend but for those as desperated as me...
Josh, your solution has just saved me a headache, thank you very much!
I think i've amended it slightly in order to handle pages where you don't know the total number of images. It seems to be working fine for me, if anyone can see any flaws, please point them out - i'm still learning.
$(document).ready(function () {
$('#slideshow > img').each(
function go() {
$(this).bind('load', function (e) {
projects();
$('#slideshow > img').css('visibility', 'visible');
});
});
});
function projects() {
$('#slideshow').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
next: '#next ',
prev: '#prev ',
after: onAfter,
nowrap: 1,
autostop: 1
});
}
If you're using a database to populate the slideshow you could try accessing the image dimensions from the image itself.
For example, using django you can use
width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px"
in your img tag.
You can use a solution similar to making youtube videos responsive. You need to know the ratio of your width to height, and add that as padding-bottom to the cycling div. For my 1024X680 photos, I used 680/1024 = 66.4%
In your case, I believe
#slideshow{
padding-bottom:66.4%;
}
will show the image unshrunk. I have no idea what the actual height and width values you are working with, so substitute your own. I had to use this solution when the $(window).load solution proved maddeningly ineffective -- so now I use both.
This is better than setting the dimensions of the image, because it's slides into a fluid, responsive enviroment.