Fancy box transition effect broken - javascript

The transition effect in the code below is broken, instead of fading in, the fancybox just jumps up from the top of the window down in the middle.
How can I make this work correctly?
window.onload = function() {
$(function(){
function showfb(id) {
if (/^#.*/.test(id)) {
$(id).show();
$.fancybox({
href: id,
type:'inline',
'transitionIn': 'fade', // elastic, none, ease, fade
'transitionOut': 'fade',
onClosed: function() {
$(id).hide();
}
});
}
}
showfb(location.hash);
$('a.profile').click(function(e){
showfb($(this).attr('href'));
});
});
};

Related

jQuery Waypoints not firing at correct location

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.
I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.
// first-flexslider
$(window).load(function() {
$('#firstSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: true,
});
});
// second-flexslider
$(window).load(function() {
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
});
});
$('.prev, .next').on('click', function() {
var href = $(this).attr('href');
$('#secondSlider').flexslider(href)
return false;
})
$(document).ready(function(){
$.waypoints('refresh');
});
// waypoints
$(document).ready(function() {
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInUpD');
}, {
offset: '75%'
});
});
I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.
Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
I would check out the after callback and possibly the start callback and call refresh from there. For example:
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
after: function() {
$.waypoints('refresh');
}
});

sliding an image down when it appears

function showImage() {
var toggleImage = document.getElementById("loadingImage");
if(toggleImage.style.display == "inline") {
document.getElementById('loadingImage').style.display='none';
} else {
document.getElementById('loadingImage').style.display='inline';
document.getElementById('loadingImage2').style.display='none';
document.getElementById('loadingImage3').style.display='none';
document.getElementById('loadingImage4').style.display='none';
}
}
<img class="TeamMembersPictures" `enter code here`src="http://www.ishop247.co.uk/TeamPictures/Yvonne.jpg" onclick="showImage();"/>
<img id="loadingImage" src="http://www.ishop247.co.uk/TeamPictures/YvonneBG.jpg" style="display:none"/>
This is the code i have to display a new image on click of another image but what i want is for it to be a smooth slide down on the image that is displayed onclick
Better yet, why not use CSS animation? Check out Animate.css (I have no affiliation) which allows you to simply include the css file at the top of the page and then do something like this...
<img src="whatever.png" class="animated bounceInDown"/>
You can download the css here...
http://daneden.github.io/animate.css/
To slide an element down with jQuery, you want the slideDown function. For example:
function showImage() {
$('#loadingImage').slideDown();
}
As you can see from the link to the slideDown documentation, there are many ways you can customize the slide.
function showImage() {
$('#loadingImage').slideDown({
duration: 400,
easing: 'swing',
queue: true,
specialEasing: {/*key: value...*/},
step: function(now, tween) {
// ...
},
progress: function(animation, progress, remainingMs) {
// ...
},
complete: function() {
// ...
},
start: function(animation) {
// ...
},
done: function(animation, jumpedToEnd) {
// ...
},
fail: function(animation, jumpedToend) {
// ...
},
always: function(animation, jumpedToend) {
// ...
}
});
}
If you don't need much of that, there are a couple smaller variations on the function (all parameters are optional):
$('#loadingImage').slideDown(400, function() {
// complete...
});
$('#loadingImage').slideDown(400, 'swing', function() {
// complete...
});
Core jQuery only offers 'swing' and 'linear' for the easing values. Plugings such as jQuery UI can offer additional values. Duration can be a number (in milliseconds) or a string ('fast' = 200ms or 'slow' = 600ms).

Slider doesn't load when hidden div appears / shows

I'm working with Joomla 2.5 and am using this here:
http://www.code7.co.uk/joomla-responsive-slider
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav:false,
keyboardNav:false,
direction: "horizontal",
slideshowSpeed:3000,
animationSpeed:600,
randomize: false
});
});
</script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change:
function changeSection(section) {
if(activeSection != section) {
$('#'+activeSection).fadeToggle("slow");
$('#'+section).delay(500).fadeToggle("slow");
$('#menu-'+activeSection).removeClass('active');
$('#menu-'+section).addClass('active');
document.title = activeSectionTitle;
history.pushState({}, '', section);
activeSection = section;
}
}
Try (updated)
$(document).ready(function () {
$("div:not(:first)").hide(0);
var toggletwo = function (i) {
$("div:not(:nth-of-type(" + i + "))").fadeOut(125, function () {
$(this).siblings("div").fadeIn(250)
})
};
$("li a").on("click", function (e) {
return ($(e.target).is("a:first") ? toggletwo(1) : toggletwo(2))
});
});
jsfiddle http://jsfiddle.net/guest271314/68k7F/

Make jCarousel slider slide continously

I have a jCarousel, with autoscrolling, like: http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Is it possible to make it slide continously, smoothly? instead of scrolling few items at a time?
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: 1, wrap: 'circular', animation: 'fast', scroll: 1, initCallback: mycarousel_initCallback });
});
</script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- My slides here -->
</ul>
Also, can I do something to keep the autoscroll after I click on the navigation arrows, and the mouse is not hover the slider?
I haven't found nothing related in their documentation: http://sorgalla.com/projects/jcarousel/
Delete that line so your hover mouse will not stop animation:
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
and try delete this:
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
it may help you to get not starting all the time from (0) element. but first please check it.
so as you see you can delete whole function callback.
I have found what I was looking for. So my code look like:
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: .01, wrap: 'circular', animation: 2000, scroll: 1, easing: 'linear', initCallback: mycarousel_initCallback });
});
</script>
It looks like these two settings combined "animation: 2000, easing: 'linear'" , are doing what I needed.

jquery fade issue

I'm trying to implement an image slider that displays some text on hover. It's working fine except in IE8 where there is a flash of text everytime the slider changes images.
Here's the current js code:
<script type="text/javascript">
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1
})
});
</script>
A link to a live example here
A Link to jsFiddle
It seems to work if you force the description to hide during the transition:
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1,
cleartypeNoBg: true,
before: function() { $('.description').css('display', 'none'); },
after: function() { $('.description').css('display', 'block'); }
});
});

Categories

Resources