SlidesJS hide works one time only

SlidesJS hide works one time only - javascript

i made 5 slideshows and i made a hide show jquery for them, my problem is after i show the hidden slideshows they dont respond anymore its just a static image of the last pic of the slideshow.
<div class="container">
<div id="slides">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides0">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides1">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
<div id="slides2">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides3">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
</div>
then my hide show jquery is
// JavaScript Document
$(function() {
$("#slides").show();
$("#slides0,#slides1,#slides2,#slides3").hide();
$("#intro").click(function(){
$("#slides0,#slides1,#slides2,#slides3").hide();
});
$("#intro").click(function(){
$("#slides").show();
});
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
});
$("#single").click(function(){
$("#slides0").show();
});
$("#double").click(function(){
$("#slides,#slides0,#slides2,#slides3").hide();
});
$("#double").click(function(){
$("#slides1").show();
});
$("#family").click(function(){
$("#slides,#slides0,#slides1,#slides3").hide();
});
$("#family").click(function(){
$("#slides2").show();
});
$("#deluxe").click(function(){
$("#slides,#slides0,#slides1,#slides2").hide();
});
$("#deluxe").click(function(){
$("#slides3").show();
});
});
and the sliders jquery that SlideJs made that i added for multiple slideshows
// JavaScript Document
$(function() {
$('#slides').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides0').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides1').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides2').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides3').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
This is the webpage:Slider

you are hiding/showing slideshows after Slide.Js has been call, of cause they don't work. try to wrap your last block of codes in a function, and call it every time you execute your second block of codes
first you shouldn't have repeated these functions, do something like this
function active_slidesjs(slidesID){//slidesID is your elements
slidesID.slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
}
then when you click your elements, call the function like this
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
active_slidesjs($(this));
});
The syntax might be wrong, but the idea is there

Related

Slick Slider Carousel Counter not displaying first slide count, only starts once 2nd slide appears

I have a slider with a counter that currently shows the full amount of slides but doesn't show the counter for the first slide. It wont activate until the 2nd slider appears. Once this has happened you can slide it back and it will show you the counter for the first slide.
I'm struggling to figure out how to show the first slide counter on first load,init.
Here is a JSFiddle.
Code below:
const addZeroPad = (val) => val.toString().padStart(2, "0");
$('.gallery').each(function (index, sliderWrap) {
const $module = $(this);
const $slider = $module.find(".gallery__slides");
const $slides = $slider.find(".gallery__item");
const $numbersElem = $module.find(".gallery__counter");
const $totalNumElem = $module.find(".gallery__counter .gallery__amount");
const $activeNumElem = $module.find(".gallery__counter .gallery__count");
if ($slides.length) {
$slider.on("init", function(event, slick) {
console.log(slick.$slides.length);
$totalNumElem.text(addZeroPad(slick.$slides.length));
$numbersElem.show();
});
$slider.on("afterChange", function(event, slick, currentSlide, nextSlide) {
$activeNumElem.text(addZeroPad(currentSlide + 1));
});
$slider.slick({
dots: false,
arrows: false,
speed: 700,
infinite: false,
centerMode: true,
centerPadding: '1%',
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
variableWidth: false,
});
}
});
.gallery {
overflow: hidden;
position:relative;
}
.gallery__item {
position: relative;
width: 100%;
overflow: hidden;
padding:0 20px;
}
.gallery__counter {
position:absolute;
top:0;
left:0;
font-size:50px;
line-height: 60px;
font-family:arial;
letter-spacing: -1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section class="gallery o-pd-top-md o-pd-btm-md" >
<div class="gallery__slides js-fade-in o-delay-xs" data-type="gallery">
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
</div>
<div class="container text-right">
<div class="gallery__counter">
<span class="gallery__count"></span>
<span> - </span>
<span class="gallery__amount"></span>
</div>
</div>
</section>

owlCarousel show two slides on page load, but on resize it show one

I am using Owl Slider on my page, it is working fine for the desktop view of my page, But when i view my page on mobile, on first load it always show two slides at a time,
On resizing the screen or window it get fine and show the perfect view.
<div class="banner-container">
<div id="banner-slider-demo-22" class="owl-carousel owl-banner-carousel" data-slider-id="1">
<div class="item" style="background:url('MyUrl') center center no-repeat;background-size:cover;">
<div class="container" style="position:relative;height:532px;">
<div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
<h2>neu im shop airride opel insignia a sports tourer</h2>
</div>
</div>
</div>
<div class="item" style="background:url('MyUrl') center center no-repeat;background-size:cover;">
<div class="container" style="position:relative;height:532px;">
<div class="content" style="position:absolute;z-index:1;top: 50%;left: 0;text-align: left;padding-left: 15px;transform: translateY(-50%);">
<h2>neu im shop airride opel insignia a sports tourer</h2>
</div>
</div>
</div>
</div>
</div>
And this is JS i am using:
<script type="text/javascript">
require([
'jquery',
'owlcarousel',
'owlcarousel_thumbs'
], function ($) {
var banner_owl = $("#banner-slider-demo-22");
banner_owl.owlCarousel({
items: 1,
autoWidth: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: false,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],
thumbs: true,
thumbImage: false,
thumbsPrerendered: true,
thumbContainerClass: 'owl-thumbs',
thumbItemClass: 'owl-thumb-item',
responsive:{
768:{
items:1,
nav: false,
},
}
});
});
</script>
Here is the result image:
But when i resize my screen it get fine like this:
Any Quick Solution?

Probably this will work, you need to add two breakups as stated here https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
<script type="text/javascript">
require([
'jquery',
'owlcarousel',
'owlcarousel_thumbs'
], function ($) {
var banner_owl = $("#banner-slider-demo-22");
banner_owl.owlCarousel({
items: 2,
autoWidth: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
dots: false,
nav: false,
navRewind: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
loop: true,
navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],
thumbs: true,
thumbImage: false,
thumbsPrerendered: true,
thumbContainerClass: 'owl-thumbs',
thumbItemClass: 'owl-thumb-item',
responsive:{
0:{
items:1,
nav: false,
},
768:{
items:2,
nav: false,
},
}
});
});
</script>

How to make the jQuery modal dialog boxes show once a day?

i have jQuery modal dialog boxes, witch is opening automatically and have setTimeout:
function showChat() { $(function(){
$('#chat').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 400,
height: 250,
open: function(event, ui){
setTimeout("$('#chatnsp').dialog('close')",30000);
}
}); }); } showChatp();
<a onclick="showChatnsp(); return false;"><div style="display:none; "> </div></a> <div id="chatnsp" title=" " style="display:none; "> TEXT </div>
How to make the modal window show once a day?
Found this code, but could not connect:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function() {
if (!$.cookie('hideModal')) {
var delay_popup = 5000;
setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
}
$.cookie('hideModal', true, {
expires: 1,
path: '/'
});
});
</script>

Javascript dialog auto heigth not work correctly

i wrote this code in cshtml to create a container for my pdf viewer modal:
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>
and my js is:
function PopupPDF() {
$('#form_modal_PDF').dialog({
open: function () {
$(this).closest(".ui-dialog")
.find(".ui-button-text")
.removeClass("ui-button-text");
}
, autoOpen: false
, modal: true
, draggable: false
, resizable: false
, show: 'slide'
, hide: 'drop'
, width: '80%'
, height: 'auto'
, beforeClose: function () {
$('#form_load_PDF').attr('src', 'about:blank');
}
});
$('#form_modal_PDF').dialog('open');
$('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}
But my dialog pdf viewer in height deals only 10% of my screen
Thanks

You need change iframe code like this
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>

Here's how you can calculate the height with javascript:
$(document).ready(function() {
PopupPDF();
});
function PopupPDF() {
$('#form_modal_PDF').dialog({
open: function () {
$(this).closest(".ui-dialog")
.find(".ui-button-text")
.removeClass("ui-button-text");
}
, autoOpen: false
, modal: true
, draggable: false
, resizable: false
, show: 'slide'
, hide: 'drop'
, width: '80%'
, height: $('body').height() * 0.6
, beforeClose: function () {
$('#form_load_PDF').attr('src', 'about:blank');
}
});
$('#form_modal_PDF').dialog('open');
$('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}
html, body {
height: 100%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
<iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>
It's done with $('body').height() * 0.6. Just change it to the percentage you want (and replace "body" with the actual container of the "form_modal_PDF" div).

jQuery trigger h1 color change using CSS and Maximage slider

I'm trying to change the color of a h1 tag depending on the current active slide.
Basically, as the slide changes, so does the h1's color through the use of a data-main-color attribute.
I'm using the Maximage slider.
I understand that I've made no attempt to trigger the change on an event, this is where my knowledge has hit a wall... so any help would be great.
My code
HTML:
<div id="maximage">
<div>
<img src="images/homepage_1.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div>
<img src="images/homepage_2.jpg" alt="" />
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div>
<img src="images/homepage_3.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div>
<img src="images/homepage_4.jpg" alt="" />
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div>
<img src="images/homepage_4.jpg" alt="" />
<div class="in-slide-content" data-main-color="#000"></div>
</div>
</div>
Once Maximage has done its thing:
<div id="maximage" class="mc-cycle">
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_1.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_2.jpg);">
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_3.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_4.jpg);">
<div class="in-slide-content" data-main-color="#FFF"></div>
</div>
<div class="mc-image" style="background-image: url(http://box.dev/box-v1.0/images/homepage_5.jpg);">
<div class="in-slide-content" data-main-color="#000"></div>
</div>
</div>
JS:
(function ($) {
$('#maximage').maximage({
cycleOptions: {
pager: '#maximage',
activePagerClass: 'active',
fx:'scrollUp',
easing: 'easeOutSine',
speed: 1000,
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right'
},
onFirstImageLoaded: function(){
$('#loader').hide();
$('#maximage').fadeIn('fast');
}
});
$(window).bind("load", function() {
$(".mc-image").each(function () {
var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");
$(".page-title > h1").css({
color: mainColor
});
});
});
}(jQuery));

Thanku for your code my text get change by doing this..
first find currentimage using current object and use that object nd apply your function
$(function() {
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 6000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 5000,
prev: '#arrow_left',
next: '#arrow_right',
pause: 0,
before: function(last, current) {
var myfont = $(current).find(".in-slide-content").data("main-color");
$("#about").css({
"color":myfont
});
$("#about>h1").css({
"color": myfont
});
if (!$.browser.msie) {
// Start HTML5 video when you arrive
if ($(current).find('video').length > 0) $(current).find('video')[0].play();
}
},
after: function(last, current) {
if (!$.browser.msie) {
// Pauses HTML5 video when you leave it
if ($(last).find('video').length > 0) $(last).find('video')[0].pause();
}
}
},
onFirstImageLoaded: function() {
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn('fast');
}
});
// Helper function to Fill and Center the HTML5 Video
jQuery('video,object').maximage('maxcover');
});

Solved:
(function ($) {
$('#maximage').maximage({
cycleOptions: {
pager: '#maximage',
activePagerClass: 'active',
fx:'scrollUp',
easing: 'easeOutSine',
speed: 1000,
timeout: 6000,
prev: '#arrow_left',
next: '#arrow_right',
after: onAfter
},
onFirstImageLoaded: function(){
$('#loader').hide();
$('#maximage').fadeIn('fast');
}
});
function onAfter() {
var mainColor = $(".mc-image.active").find(".in-slide-content").data("main-color");
$(".page-title > h1").css({
color: mainColor
});
}
}(jQuery));

Develop Reference

JavaScript is the programming language of the Web.

SlidesJS hide works one time only - javascript

Related

Slick Slider Carousel Counter not displaying first slide count, only starts once 2nd slide appears

owlCarousel show two slides on page load, but on resize it show one

How to make the jQuery modal dialog boxes show once a day?

Javascript dialog auto heigth not work correctly

jQuery trigger h1 color change using CSS and Maximage slider

Categories

Resources