Create smoother animation on carousel? - javascript

I'm in the process of making a carousel-based Tumblr theme HERE but I'm very disappointed with the animation. Is there anything I can add to this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">
</script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle
/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com
/jquery.easing.1.1.1.js">
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;
$('#s7').cycle({
fx: 'scrollRight',
speed: 'fast',
timeout: 0,
easeIn: 'bounceout',
easeOut: 'backin',
next: '#next2',
prev: '#prev2'
});
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log( $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
.append('<h3>' + this.alt + '</h3>');
}
</script>
To make the animation of the carousel smoother?

Change up your options, mate.
$('#s7').cycle({
fx: 'scrollRight',
speed: 1000,
timeout: 0,
next: '#next2',
prev: '#prev2',
easing: 'easeinout'
});

I've had a good experience with defining my images as background images in CSS, rather than using actual tags in HTML. This greatly increased the smoothness of scrolling using a Bootstrap carousel and Chrome. The markup / CSS for this would be something like this:
HTML:
<div id="my-image">
</div>
CSS:
#my-image {
background:url("image.png") no-repeat 0 0;
}

The smoothness (or lack thereof) of an animation like this depends a lot on the browser in use, as well as the computer being used (slower computer = more stilted animation).
You might try using a more CSS3 based approach (i.e. less reliant on JS), but that would be limited to modern browsers (in this case webkit only).

Related

Create a nice scrolling/sliding effect with JS

I would like to create a "smooth" scroll animation that slides down from one element to the next. I do not want to use Jquery or any libraries, just javascript and HTML. I have tried:
element.scrollIntoView();
This causes scrolling, but not a smooth animation. I have already looked at some other smooth-scrolling techniques, but they use Jquery. I would also like to add that the scrolling should be from ELEMENT on a page to another ELEMENT on the page. Scroll down only. Also only javascript function like function scrollFromHere(from, to).
I know this is an old answer, but for anyone looking for a solution in "modern times", scrollIntoView supports the behavior parameter:
element.scrollIntoView({
behavior: 'smooth'
});
Support for behavior: "smooth" is Chrome 61, Edge 79, Firefox 36, Safari 15.4.
So Safari is the only real issue for support, assuming you want to support more than just the latest major of Safari (as of 2022).
Never mind, I think I found an answer to my question. It took lots of searching, but here it is:
<div id="elem1"><button onclick="scrollToward('elem2', 'elem1');">Scroll Down</button></div>
<div id="elem2"></div>
<script>
//Here is my script:
function animate(elem,style,unit,from,to,time,prop) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
if (prop) {
elem[style] = (from+step*(to-from))+unit;
} else {
elem.style[style] = (from+step*(to-from))+unit;
}
if( step == 1) clearInterval(timer);
},25);
elem.style[style] = from+unit;
}
function scrollToward(ele, from) {
var target = document.getElementById(ele);
from = document.getElementById(from).offsetTop;
animate(document.body, "scrollTop", "", from, target.offsetTop, 1500, true);
}
</script>
Tested and works when you style the divs in a way that creates a scrollbar. Found the answer here.
!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="">
</div>
</body>

ASP.NET MVC4 - JQuery jqFancyTransitions error: TypeError: $(...).jqFancyTransitions is not a function

I have my Index.cshtml view, and for some reason, the JQuery is having a hard time firing the jqFancyTransitions method (it's acting as if the jqFancyTransitions library isn't included). The JavaScript IS firing though. For testing, I even put $('#rotatingImages').html('blah'); to see if it would find my ID and replace it's HTML contents, but it didn't.
I do get a JS error in my Firebug console: TypeError: $(...).jqFancyTransitions is not a function. Yet, I get jqFancyTransitions intellisense after I type a dot at the end of the parenthesis.
EDIT:
The jqFancyTransitions.js library IS in fact being loaded into the browser according to Firebug. To test it out, I removed the reference to it, and then I didn't see the library was loaded. I added it back in to my view, and I see it.
Here's the code on Index.cshtml:
<script src="~/Scripts/jqFancyTransitions.1.8.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
// $('#rotatingImages').html('blah'); // just for testing
});
</script>
<div id="rotatingImages">
<img src="Images/Background/bg1.jpg" />
<img src="Images/Background/bg2.jpg" />
<img src="Images/Background/bg3.jpg" />
<img src="Images/Background/bg4.jpg" />
</div>
Any ideas what's going on?
I believe your JavaScript reference needs to be changed to
<script src="#Url.Content("~/Scripts/jqFancyTransitions.1.8.js")"></script>
for Razor ViewEngine, or
<script src="<%=Url.Content("~/Scripts/jqFancyTransitions.1.8.js")%>"></script>
for WebForms ViewEngine.
Real simple. All I had to do was include my scripts in a "scripts" section inside the view I was working in, which was Index.cshtml, as follows:
#section scripts
{
#Scripts.Render("~/bundles/fancyTransitions")
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
});
</script>
}
I thing u forgot to link jQuery library on the top. before
<script src="~/Scripts/jqFancyTransitions.1.8.js"> </script>

Need help changing the speed duration of slides with Jquery scripts

So first off I have basically no working knowledge of javascript or Jquery. Second off I have tried to look up answers to this and tried a few things but nothing worked for me.
My slides seem to change every 6 or 7 seconds. I want to make each slide last longer. Maybe about 12 seconds before changing. I have tried changing the speed and timeout values and adding mouse overs for a pause feature but nothing has worked.
This is the code built into the web template. Top half looks to be for admin editing, while bottom is the general page view. Any help with this is greatly appreciated.
jQuery.noConflict();
jQuery(document).ready(function($){
// Checks for Admin to apply fixes for backend
if ( $('#adminbar #toolbar').length ) {
$('#features').cycle({
fx: 'scrollRight',
speed: 100,
next: '#next',
prev: '#prev',
timeout: 0
});
$("#controls").show();
$("ul#featuredNav").css({
'margin-top': '-38px'
});
$("ul#featuredNav li").css({
'margin': '-20px 0 90px',
'padding': '0 0 0 20px'
});
$("#featuredWrapper").css({
'margin': '0 0 80px'
});
}
else {
$('#features').cycle({
fx: 'scrollRight',
pager: '#featuredNav',
speed: 500,
timeout: 6000,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#featuredNav li:eq(' + idx + ')';
},
updateActivePagerLink: function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeTab')
.filter('li:eq('+currSlideIndex+')').addClass('activeTab');
}
});
$("#controls").hide();
}
});
Change
timeout: 6000,
to
timeout: 12000,
then clear your browser and site caches.

Display Different Image On Load/Refresh

I'm currently using Jquery Cycle plugin for my project and the slideshow is running smoothly. However, I want my slide to display or start with a different image on every page refresh. I'm not sure how to add a function/script to achieve that or if it's possible. I'm new to JQuery so any help would greatly be appreciated!
Script:
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
});
});
My HTML:
<div class="slideshow">
<img src="images/img_slide-1.jpg" />
<img src="images/img_slide-2.jpg" />
<img src="images/img_slide-3.jpg" />
</div>
Use the startingslide option
startingSlide: 0, // zero-based index of the first slide to be displayed
To pick a random slide you need to get a random index like this
var rand = Math.floor(Math.random() * $('.slideshow img').length);
Then, when you initiliaze the cycle, use the rand variable as the startingslide.
$(document).ready(function() {
var rand = Math.floor(Math.random() * $('.slideshow img').length);
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 7000,
prev: '#prev',
next: '#next',
startingSlide: rand
});
});
Doing some quick research on this plugin (I have never used it before), it looks like there is a random option that you can specify as true. Take a look in the docs: http://jquery.malsup.com/cycle/options.html (just ctrl-f for "random").
If you were looking from just a random first picture, then sequential slides after (as stated in the comments), just use startingSlide: SLIDE_NUMBER_HERE, and it should work, based on minimal research on the docs.

Galleria + Colorbox working in IE, not in others

I thought I had this worked out, but unfortunately it does not work in FF or Chrome. I have a list of images that I would like displayed as a slideshow with carousel on my page. When the user clicks on the larger image I would like it to open a full size image in a lightbox. Here is the code that works in IE:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[rel=test]').colorbox();
$('#exteriorSlideShow_gallery').galleria({
max_scale_ratio: 1,
image_crop: false,
height: 210,
transition: 'fade',
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
$(e.imageTarget).click(this.proxy(function(e) {
e.preventDefault();
$('a[rel=test]').eq(this.active).click();
}));
});
}
});
});
</script>
In the above, "this.active" represents the index of the image in which the carousel is currently on. Since it is in the same order the links below are displayed in, it corresponds to the correct link I would like to have clicked.
<div id="exteriorSlideShow_gallery">
<img src='/Images/THUMB1.gif' />
<img src='/Images/THUMB2.gif' />
<img src='/Images/THUMB3.gif' />
</div>
Anyone know why this wouldn't work in anything but IE?
EDIT
For the time being I have put in a work around. If the browser is IE I call the code as above else I use $.colorbox({ 'href': urloflargeimage }). This doesn't allow grouping of the images for anything but IE, but at least I have a lightbox up.
Galleria strips most of your container content after grabbing necessary data, but it leaves it hidden in IE because of a loading bug. That is why your hack works in IE but not elsewhere.
I'm not sure how colorbox works, but it looks like it cannot take a normal array of URLs and assign it as a group of images and then call each box manually onclick. But you might be able to do something like this (hack):
var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array
$('#exteriorSlideShow_gallery').galleria({
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
var index = this.active;
$(e.imageTarget).bind('click', { active: this.active }, function(ev) {
box.eq(ev.data.active).click();
});
});
}
});
I have solved this. You have to put the links outside the galleria container, separate from the images, then click them when an image is clicked. Like so:
$(document).ready(function(){
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;
$("#gallery").galleria({
autoplay: 6000,
transitionSpeed: 1000,
transitionInitial: 'fade',
width: 958,
height: 443,
imageCrop: 'width',
minScaleRatio: 1,
extend: function() {
this.bind(Galleria.IMAGE, function(e) {
$(e.imageTarget).css('cursor','pointer');
$(e.imageTarget).click(this.proxy(function() {
targ = $(e.imageTarget).attr('src');
$('a[href="'+targ+'"]').click();
}));
});
}
});
});
and the HTML looks like:
<div id="gallery">
<img src="images/jqIm4.jpg" />
<img src="images/jqIm5.jpg" />
</div>
<div id="source">
</div>
The script tag is missing a quote character. Is it like that in your actual source? If so, that could seriously upset Firefox.
Specifically
<script type="text/javascript>
should be
<script type="text/javascript">

Categories