I'm using caroufredsel which I've used many times and have never had this problem before. On Safari only the initial load of the page shows a split image - half of the first and half of the second. Like this:
The slideshow fades the the next one fine and if you go to another page and back again then it is also fine. And it only occurs on Safari. Does anyone have any ideas?
This is my html:
<div class='slideshow'>
<div class='centralised_div'>
<div class='slideshow_inner'>
<div class='slideshow_images'>
<img src='/images/ss2.jpg'/>
<img src='/images/ss3.jpg'/>
<img src='/images/ss4.jpg'/>
</div>
</div>
<div class='arrow_left'><img src='/images/left_arrow.png'/></div>
<div class='arrow_right'><img src='/images/right_arrow.png'/></div>
</div>
</div>
And this is my jquery:
<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
$(document).ready(function() {
$(".slideshow_images").carouFredSel({
width: 940,
height: 400,
direction: "left",
items: {
visible: 1,
start: "random",
width: 940,
height: 400
},
scroll: {
fx: "crossfade",
duration: 1000,
pauseOnHover: true
},
auto: 6000,
prev: {
button: ".arrow_left",
key: "left"
},
next: {
button: ".arrow_right",
key: "right"
}
});
});
</script>
Most of the problems I have with carouFredSel are solved when I initialize it after window load instead of document ready. Maybe that helps you:
<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
$(window).load(function() {
$(".slideshow_images").carouFredSel({
width: 940,
height: 400,
direction: "left",
items: {
visible: 1,
start: "random",
width: 940,
height: 400
},
scroll: {
fx: "crossfade",
duration: 1000,
pauseOnHover: true
},
auto: 6000,
prev: {
button: ".arrow_left",
key: "left"
},
next: {
button: ".arrow_right",
key: "right"
}
});
});
</script>
Related
I am using the JQuery slides that you can find here http://www.slidesjs.com/examples/standard/
but the fade effect is not working on play, only on navigation !
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: {
fade: {
speed: 1000
}
}
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
</script>
I also tried to remove the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I've made this work. Per the docs, you can set the effect property for play to a string.
Check out the jsfiddle: https://jsfiddle.net/cale_b/5ac1cebL/
$(function() {
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 500,
// within the play property, effect should be a string, i.e. "fade"
effect: "fade"
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
});
Removing the speed from the first part of your code will get the fade working on initial play.
$('#slides').slidesjs({
width: 800,
height: 400,
play: {
active: true,
auto: true,
interval: 3500,
effect: "fade"
//swap: true
},
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 1000
}
}
});
I have inherited a web page that has a slide show on it and I can't figure out how to change the width of the <article> containing the slide show. I think it is getting size via JavaScript, but I have searched and can't figure out where.
If you view source on the page you will not see a width in the article tag, but if you use firebug to look at the styles you will see:
element.style {
width: 565px;
}
I've posted a sample version here: http://208.112.58.198/help/index_new.htm.
Your element's CSS width is being applied by the jquery plugin.
/help/wp-content/themes/Cobalt3/cobalt/js/main68b3.js this file line number #339 has the following code.
$('#part-slideshow').carouFredSel({
height: 300,
width: '100%',
circular: true,
items: {
visible: 1,
height: 300,
},
scroll: {
items: 1,
fx: "crossfade",
duration: 1000,
easing: "swing"
},
auto: {
timeoutDuration: 5000,
delay: 5000,
pauseOnHover: true
},
pagination: '#pagination',
swipe: {
onTouch: true,
onMouse: true
},
responsive: true
});
The plugin binds a resize event function to the carousel elements, which sets the element width responsive to the screen size because responsive: true option is added in the call.
In the javascript file i have this code:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
I want that when the pauseOnHover execute that something will happen in the html file.
In the html file i included the javascript file already:
<script src="java_script.js"></script>
Also added some style code for the test:
<style>.container {
background: rgb(170, 187, 97);
background: rgba(170, 187, 97, 0.5);
}</style>
And when the pauseOnHover execute happen in the javascript file i want to display on screen this two lines in the html file:
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>
I have a carousel but somehow the last thumb doesn't work, you can double click it and shows wrong large image.. I really can't find the issue :(
Here it works with the last thumb: CAROUSEL
Here it doesn't: FIDDLE
The script:
$(function() {
$('#carousel').carouFredSel({
responsive: false,
circular: false,
auto: false,
items: {
visible: 2,
width: 1000,
height: '475'
},
scroll: {
fx: 'crossfade'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 4
},
width: 254,
height: 112
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#carousel').carouFredSel({ needed to be
visible: 1 and NOT visible: 2
I have the code following where I am unable to add Autoplay on the slider. Can anyone help me with this?
Jquery
<script type="text/javascript">
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(document).ready(function(){
$('img.captify').captify({
speedOver: 'fast',
speedOut: 'normal',
hideDelay: 500,
animation: 'slide',
prefix: '',
opacity: '0.7',
className: 'caption-bottom',
position: 'bottom',
spanWidth: '100%'
});
});
</script>
How can I Add Autoplay on this slider
$(function() {
$(".slider").jCarouselLite({
auto:500,
speed:800,
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(".slider .jCarouselLite").jCarouselLite({
auto: 800,
speed: 1000
});