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>
Related
Issue:
I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
It is not meeting the functionality of implementation.
Goal:
As we click on the timeline dots the photos have to be moved in accordance with it.
Tried Code:
These are the following code I have tried.
<script type="text/javascript">
function slider_config() {
$('.slideshow').slick({
dots: true,
customPaging: function(slick,index) {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
return '<a>' + dateList[index] + '</a>';
},
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear',
});
$(".loading-bar").slick({
centerMode: true,
// centerPadding: "80px",
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 3,
focusOnSelect: true,
asNavFor: ".labels"
});
$(".labels").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
draggable: false,
asNavFor: ".loading-bar"
});
$('.slideshow').slickLightbox({
src: 'src',
itemSelector: 'img',
caption: 'caption',
slick: {infinite:false}
});
}
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";
//The same CSS code as in code pen
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 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'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>
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
});