Develop Reference

JQuery slides: fade effect

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
}
}
});

Carousel last thumb doesn't work

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

Center Draggable Jquery Dialog

For the last few hours I've been trying to have an animated dialog that will initiate a puff animation, is draggable and when closed will center again when opened. As of now I have it so the animation initiates, it's draggable but when I close and open it, it's fixed in the same position it was dragged to.
I've tried using the open function, complete function in show/hide, setting the div/dialog in a function, using position: center and yeah...
Anyway, here is the code:
frm_location.jsp:
//this is in an "a" tag, can't seem to get it to display properly
id="NEW_LOCATION_BUTTON" href="javascript:openDialog('#dialog-form','#popupBoxCancel','orange-theme','625');" class="btn_sel">
jQueryDialog.js:
function openDialog(_dialog, _cancel, _theme, _size) {
jQuery(document).ready(function ($) {
$(_dialog).dialog({
autoOpen: true,
width: _size,
modal: true,
position: "center",
resizable: false,
draggable: true,
dialogClass: _theme,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
$(_cancel).click(function() {
$(_dialog).dialog("close");
});
}

Take a look at this. I'm not sure how you're reopening the dialog, but this should do. jsfiddle code
<div id='dialog'>PUFF</div>
<button id='reopen'>OPEN DIALOG</button>
$(function () {
$('#reopen').click(function () {
$( "#dialog" ).dialog({ position: 'center'});
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: true,
width: 200,
modal: true,
position: "center",
resizable: false,
draggable: true,
show: {
effect: "puff",
percent: "-150",
duration: 250
},
hide: {
effect: "puff",
percent: "-150",
duration: 250,
},
});
});

Initial slideshow shows split image

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>

How to add a jquery parameter

I have this javascript to display my divs with jquery isotope
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#box-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
</script>
And I need to add this parameter, but I don't know how, because I don't know javascript.
sortBy : 'random'

see http://isotope.metafizzy.co/docs/sorting.html
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#box-content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
sortBy: 'random'
});
</script>