We Keep Coding

Ken Burns effect using Joelambert's Flux Slider? Is it possible?

I am currently using Joelambert's Flux Slider.
GitHub: https://github.com/joelambert/Flux-Slider
Demo: http://www.joelambert.co.uk/flux/
Basically there are many effects such as Bar, Slide, Swipe. Each of these effects is implemented in its respective function. For instance, the codes for the effect for dissolve (fading) is shown below.
I wish to create the Ken Burns effect using this API, is it possible?
An example of the Ken Burns effect is seen in the link provided (wowslider.com/jquery-slider-bar-kenburns-demo.html). It is a type of zooming and panning effect of an image in a frame.
What I have tried: adding in '-webkit-transform':'rotate(7deg)' under the setup() or execute() function, but the rotation only appears when it transits into the next image.
Would like the images displayed to animate, basically having zooming, rotation and panning. Any guidance is deeply appreciated.
Thank you, Radiance.
(function($) {
flux.transitions.dissolve = function(fluxslider, opts) {
return new flux.transition(fluxslider, $.extend({
setup: function() {
var img = $('<div class="image"></div>').css({
width: '100%',
height: '100%',
'opacity':'1',
'filter':'alpha(opacity=100)',
'zoom':'1',
'-webkit-backface-visibility': 'hidden',
'background-image': this.slider.image1.css('background-image')
}).css3({
'transition-duration': '600ms',
'transition-timing-function': 'ease-in',
'transition-property': 'opacity'
});
this.slider.image1.append(img);
},
execute: function() {
var _this = this,
img = this.slider.image1.find('div.image');
// Get notified when the last transition has completed
$(img).transitionEnd(function(){
_this.finished();
});
setTimeout(function(){
$(img).css({
'opacity': '0.0'
});
}, 50);
}
}, opts));
};
})(window.jQuery || window.Zepto);

jQuery - Find CSS bottom of div at start, not during animation on hover

I'm finding the CSS value 'bottom' for each of these divs with the class of 'shelf-info-text'. Each of these divs are inside shelf-item.
The bottom value is automatically calculated using another function. On hover I wish bottom to be changed to 0px by way of animation, and then revert to the original bottom. Bottom will be different for every single div.
I have added a little code to find the bottom, however if you hover again mid-animation this finds the bottom before it has returned back to the original state, therefore breaking the animation.
Please advise where I'm going wrong. Thanks.
var $itemBottom = null;
$('.shelf-item').hover(function() {
$itemBottom = $(this).find('.shelf-info-text').css('bottom');
$(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
$(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});

Edit :
After re-reading the question here's a solution that will get the bottom and save it in a data attribute.
// we loop through all the shelf items and set a data attribute to keep track of it.
$('.shelf-item').each(function(){
$item = $(this).find('.shelf-info-text');
$itemBottom = $item.css('bottom');
$item.data('bottom', $itemBottom);
});
$('.shelf-item').hover(function() {
$itemBottom = $(this).find('.shelf-info-text').data('bottom');
$(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
$(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});

I'm too late to the party (because I got distracted making this fiddle). My approach is the same as #Patsy's but I avoid the .each() loop to set the data-bottom by simply setting it if it doesn't already exist:
var $el = null;
$('.shelf-item').hover(function() {
$el = $(this).find('.shelf-info-text');
$el.data('bottom',($el.data('bottom') || $el.css('bottom'))).stop().animate({ 'bottom': '0px'}, 300);
}, function() {
$el = $(this).find('.shelf-info-text');
$el.stop().animate({ 'bottom': $el.data('bottom')}, 300);
});

You could store the original bottom value using jQuery.data(). Then your function could check to see if that value had been stored, and never recalculate the bottom (avoiding the mid-animation issue).

Javascript-jquery script works in chrome and firefox but not ie (cross-fade pictures)

Can someone please look at this page and figure our why it isn't looking right in Internet Explorer? It looks fine in Chrome and Firefox but in IE the layout of the photos gets messed up specifically the two photos on the right hand side of the page.
http://waldrondigitaldesigns.com/gallery.html
I am assuming it something with this script but I am no javascript or jquery expert and barely a novice
// wrap as a jQuery plugin and pass jQuery in to our anoymous function
(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
// cache the copy of jQuery(this) - the start image
var $$ = $(this);
// get the target from the backgroundImage + regexp
var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
// nice long chain: wrap img element in span
$$.wrap('<span style="position: relative;"></span>')
// change selector to parent - i.e. newly created span
.parent()
// prepend a new image inside the span
.prepend('<img>')
// change the selector to the newly created image
.find(':first-child')
// set the image to the target
.attr('src', target);
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {
// Browser sniffing is bad - however opera < 9.5 has a render bug
// so this is required to get around it we can't apply the 'top' : 0
// separately because Mozilla strips the style set originally somehow...
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}
// similar effect as single image technique, except using .animate
// which will handle the fading up from the right opacity for us
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 450);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
});
};
})(jQuery);
// note that this uses the .bind('load') on the window object, rather than $(document).ready()
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
$('img.fade').cross();
});

must be the usual bug with positioning in IE. I would recommend reading the first answer from IE7 relative/absolute positioning bug with dynamically modified page content and see if that helps solve your problem.

try change your code to below, it should fix the photos on your right hand side. =)
// the CSS styling of the start image needs to be handled
// differently for different browsers
if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});

Animate max-width on img [JQuery]

I have tried looking for a solution, but can't find anything good.
I am customizing a blog for a friend of mine. When it loads, I want all the img's in each post to have a max-width and max-height of 150px. When the user pushes the img, the max-values should increase to 500px, which is easy enough. The problem with my code is that I can't get an animation on it, which I want. Any help out there?
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).css(cssObj);
});

I got it working, combining two of the other answers (and removing max-width & max-height in the css-code)
var cssBegin = {'max-width' : '250px','max-height' : '250px;'};
$('img').css(cssBegin);
var cssObj = {'max-width' : '500px','max-height' : '500px;'};
$("img").click(function(){ $(this).animate(cssObj,'slow'); });

instead of using .css(), try using .animate()
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).animate(cssObj,'slow');
});

$(document).ready(function()
{
// define sizes
var cssBegin = { width: 150, height: 150 };
var cssMax = { width: 500, height: 500 };
// init images with the small size
$('img').css(cssBegin);
// init click event on all images
$("img").click(function(){
$(this).animate(cssMax, 'fast');
});
});

Since you are already using CSS class, you can use toggleClass method - Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.
$("img").click(function() {
$(this).toggleClass( "cssObj", 1000 );
return false;
});
See the demo here - http://jqueryui.com/demos/toggleClass/

Todays Special: How is this done? Is there a jquery plugin or product to do it?

I saw this technique at the bottom of a web page where the TAB stays in place at the bottom of the page and can be opened and closed to display more info. I assume it can be rotated to display a different special for different days. Can you point me to anything like it or explain the technique ? thanks. Here is a sample: http://www.tmdhosting.com/ look at the bottom of the page .

position: fixed is how you manage to keep something at the bottom or top of the page, regardless of scrolling.
This is easily discoverable using firebug's (http://getfirebug.com/) inspect element feature

You can check out my version of this at uxspoke.com
I wrote a jQuery plugin to do it, and calling it is straightforward:
$('#about').pulloutPanel({open:true}).
click(function() { $(this).trigger('toggle'); }) });
I basically instrument the panel to support "open", "close" events, and the implement the appropriate animations around them. The only "hard" part is getting the height right. It also supports "toggle" so you can add a generic click handler to it to open or close it. Finally, it uses opened/closed classes to keep track of its current state. That's it!
The code's pretty coupled to the technologies on the page (Csster) and the design it is in, so I'm not sure it will work for you. You can either use Csster, or just put the CSS rules into your stylesheet and remove them from the code. The important Css attributes are the positioning and bottom.
Here it is:
$.fn.pulloutPanel = function(options) {
var settings = $.extend({}, {
attachTo: 'bottom',
css: {
left: 0,
minHeight: 390,
border: '1px 1px 1px 0 solid #666',
has: [roundedCorners('tr', 10),boxShadow([0,0], 10, phaseToColor('requirements').saturate(-30).darken(50))],
cursor: 'pointer'
}, options);
return $(this).each(function() {
var $this = $(this);
$this.addClass('pullout_panel');
$this.bind('open', function(event) {
$this.animate({bottom: 0}, 'slow', 'easeOutBounce', function() {
$this.removeClass('closed').addClass('opened');
$this.trigger('opened');
});
});
$this.bind('close', function(event) {
var height = $this.innerHeight();
$this.animate({bottom: -height + 50}, 'slow', 'easeOutBounce', function() {
$this.addClass('closed').removeClass('opened');
$this.trigger('closed');
});
});
$this.bind('toggle', function(event) {
$this.trigger($this.hasClass('opened') ? 'close' : 'open');
});
once(function() {
Csster.style({
'.pullout_panel': {
position: 'fixed',
bottom: 0,
has: [settings.css]
}
});
});
$this.trigger(settings.open ? 'open' : 'close');
});
};