I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
Related
So, I wanted to bind style with the height of another element that I got from getHeight function, but I kept getting an error that said window is not defined.
Can someone please give me a solution?
Here is my source code:
<template>
<div class="container">
<p class="section-title">past event</p>
<div class="columns is-multiline">
<div
class="column is-one-third is-centered past-events"
v-for="(event, index) in events.slice(0, 2)"
:key="index"
>
<EventCard :event="event" />
</div>
<div class="column is-one-third is-centered">
<div class="link-box" :style="{ height: getHeight() }">
<nuxt-link to="/past-events">
<p style="color: #ffffff; cursor: pointer" class="see-all">
Lihat List Event Lainnya
</p>
</nuxt-link>
</div>
</div>
</div>
<a class="see-all-btn"> </a>
</div>
</template>
<script>
import EventCard from "~/components/EventCard.vue";
export default {
name: "PastEvents",
components: {
EventCard
},
props: ["events"],
data() {
return {};
},
mounted() {
this.getHeight();
},
methods: {
getHeight() {
const height = window.getComputedStyle(
document.querySelector(".past-events")
).height;
console.log(height);
return height + "px";
}
}
};
</script>
Nuxt uses server-sided rendering. This means that when your code is being executed on the server, it does not have something like window. After all, it is not a browser.
The easiest way around this is by wrapping anything that should not be pre-rendered to html, with something like vue-no-ssr. This particular library renders a dummy component on the server, then actually renders the component when it gets to the browser.
Yes window doesn't exist during the mounted lifecycle hook. I assume you're trying to place something based on its position?
In that case, you might be able to utilize CSS to do it for you. You can place elements using the View Height/View Width units. Combine that with CSS calc() and you might get the solution you need.
Example:
.element {
/* make element positon relative to the window */
position: fixed;
/* set position - note vw/vh are % of window */
/* this put the top of your element -200px from the bottom of your window */
top: calc(100vh - 200px);
}
If you're doing something more complex, using Javascript's element.getBoundingClientRect() will likely provide what you need. See this answer for more info.
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">
I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' ยท <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.
I use jqueryUI tabs and want to implement a smooth scroll bar inside each tab. I tried several scrollable plugins like jQuery custom content scroller, TinyScrollbar and now areaaperta NiceScroll, but each time I stack with the same problem - scrollbar works only inside one tab..
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs" style="width:900px; font-size:100%;">
<ul>
<li><a href="#tabs-1" >FIRST</a></li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
<div id="tabs-1">
<div id="thisdiv">
<p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div>
<div id="tabs-2"><div id="thisdiv2">
<p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p>
</div></div>
<div id="tabs-3">
<p>THIRD TAB </p>
</div>
</div>
<script>
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
$("#thisdiv2").niceScroll({cursorcolor:"#00F"}); }
);
</script>
Here is jsfiddle that shows that there is no conflicts between UItabs and two scrollbars of niceScroll plugin: http://jsfiddle.net/Fluc/EhcqX/4/
And here I tried to use same divs with scroll bars inside each tab:
http://jsfiddle.net/Fluc/cJPT3/2/
As you can see, scrollable works only inside the first tab.. Same with other scrollable plugs..
I'm not jquery programmer but It feels like the problem is related to display property somewhere.
Any help would be very appreciated!