I'm using JSSOR for a slideshow which consists of slides which are using several HTML elements including an image element with CSS translate and scale styling. These CSS properties are necessary because the user can move the images around on another page.
The slider works as it should be while you drag/slide the slides. But on autoplay with the standard Fade transition something weird happens. On Internet Explorer and on Firefox when the fade starts it somehow disables the Transform CSS of the elements. When the fade is done the Transform CSS is back again.
This cause the images to move/scale while being faded. On Chrome nothing happens and the fade works as it should be.
I use fairly basic slides like these:
<div class="slide" idle="10000">
<div class="image-slide">
<div class="image-container" style="transform: translate(66px, 108px) scale(1.61742);">
<img src="/someimage.jpg">
</div>
<div class="svg-elements">
</div>
<div class="textArea" id="text1"
<span>Lorem ipsum dolor</span>
</div>
</div>
With this as settings for JSSOR:
var _SlideshowTransitions = [ { $Duration: 1200, $Opacity: 2 } ];
var options = {
$AutoPlay: true,
$AutoPlayInterval: 4000,
$PauseOnHover: 0,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
Update
I've added a fiddle with the same results
This is a bug, I have just fixed it and updated. Please download the latest.
Related
I have a <b-navbar> on my bootstrap-vue page. The navbar is transparent but when it is clicked (expanded) on mobile I want it to be solid. I plan to accomplish this by changing the colour from rgba(0, 0, 0, 0.05) to rgba(0, 0, 0, 1) using CSS classes.
I understand from https://bootstrap-vue.org/docs/components/navbar#comp-ref-b-navbar-toggle-events that there is something called a "Native click event object" fired when I press the toggle button. I have installed the Vue Devtools and I can see this event firing each time I press the navbar toggle button.
My question is how can I listen for this event in order to also toggle the CSS class of the navbar?
It might be easier for you to instead use the v-model on the navbar <b-collapse>, which is used to expand the content on mobile.
The v-model, will be true when expanded and false otherwise.
You can use this to conditionally toggle between classes on the navbar.
new Vue({
el: '#app',
data() {
return {
isOpen: false
}
}
})
<link href="https://unpkg.com/bootstrap#4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.17.1/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.17.1/dist/bootstrap-vue.js"></script>
<div id="app">
<b-navbar toggleable="lg" type="dark" :class="[isOpen ? 'bg-dark' : 'bg-primary']">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse v-model="isOpen" id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link 1</b-nav-item>
<b-nav-item href="#">Link 2</b-nav-item>
<b-nav-item href="#">Link 3</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.
GitHub
The idea is to show the first 4 thumbnails from a gallery on a page.
When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)
Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.
The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)
<div id="intro-gallery">
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>
Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).
<p><a class="link" href="#main-gallery-container">Gallery</a></p>
The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.
Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).
<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
<div class="gallery-item">
<a class="main" id="gi-#" href="#mgi-#">
<div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
</a>
<div class="mgi-wrapper">
<div id="mgi-#" class="mgi">
<div class="mgi-image" style="background-image: url('img/#.jpg');">
</div>
<div class="mgi-text">
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
JS
"use strict";
(function ($) {
$(function () {
$('a.link').click(function (e) {
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
}); // Add link to view gallery, bind click.
$.featherlightGallery.prototype.afterOpen = function () {
var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
$('.featherlight.single .featherlight-content').prepend(link);
$(link).click(function () {
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
});
};
$('a.intro').click(function (e) {
e.preventDefault();
initGallery(); // get ID from data-att of initial thumbnail
var id = $(this).data('click'); // Get same thumb in gallery and trigger a click
var thumb = document.getElementById(id);
$(thumb).click();
});
$('#link').click(function (e) {
e.preventDefault();
initGallery();
});
var switchToGallery = function switchToGallery(e) {
// prevent triggered click
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
};
var initGallery = function initGallery() {
$.featherlight('#main-gallery', {
variant: 'onclick',
afterOpen: function afterOpen() {
$('a.main').featherlightGallery({
targetAttr: 'href',
variant: 'single',
beforeOpen: function beforeOpen() {
$.featherlight.close();
}
});
}
});
};
});
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map
EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example
The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.
I'm not too sure what is going on and don't have the time to delve into it further.
I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.
This has been something I've been working on for hours now and I can't seem to find a solution that works. I have a page (ASP.NET Core) that has bootstrap tabs on it. Each tab displays a different chart. I've read various answers and tried so many different things from this and other sites but I'm sure what I'm doing wrong.
This is a proof of concept page I'm making and from what I understand I need to stall the loading of the chart until the nav-tab is selected. That is what I am unsure of how to do.
My View:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
#Html.Partial("~/Views/Shared/Chart_ByMonth.cshtml")
#Html.Partial("~/Views/Shared/Chart_ByMonthAndQuarter.cshtml")
#Html.Partial("~/Views/Shared/Chart_ByLeaseAdmin.cshtml")
#Html.Partial("~/Views/Shared/Chart_Fourth.cshtml")
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawMonthChart);
google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);
</script>
<body>
<ul class="nav nav-tabs" id="tabs">
<li class="active" id="tab_1"><a data-toggle="tab" href="#home">By Month</a></li>
<li id="tab_2"><a data-toggle="tab" href="#menu1">By Month & Quarter</a></li>
<li id="tab_3"><a data-toggle="tab" href="#menu2">By Lease Admin</a></li>
<li id="tab_4"><a data-toggle="tab" href="#menu3">Fourth Chart</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>By Month</h3>
<select>
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select>
<option>2016</option>
<option>2017</option>
</select>
<button type="submit" class="btn btn-success">Submit</button>
<div id="chart_month_div" style="padding-top: 20px;"></div>
</div>
.....
</div>
</body>
The partial view for that chart is just hard-coded data, again a proof of concept page:
<script type="text/javascript">
function drawMonthAndQuarterChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Type', 'Cash', 'Credit', { role: 'annotation' }],
['January', 10, 24, ''],
['February', 16, 22, ''],
['March', 28, 19, '']
]);
// Set chart options
var options = {
width: 1200,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
minValue: 0,
title: 'Approvals for the month & quarter'
}
};
// Instantiate and draw our chart, passing in some options.
var chartMonthandquarter = new google.visualization.BarChart(document.getElementById('chart_monthandquarter_div'));
chartMonthandquarter.draw(data, options);
}
The charts all load fine when tabs are selected. The legend is overlapped with itself on all but the initially shown chart. I've tried defaulting the chart divs to be hidden and having an onclick event for each tab that overrides the styling, I've tried doing events where a tab is active, nothing seems to work and I've just been banging my head against the wall.
I suspect it has something to do with the fact that I'm calling
google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);
and since the charts are already drawn right on page creation, there's no way to redraw them. What I am not sure how to do is successfully get the charts to draw only when a new tab is active or something similar.
as you've gathered,
the problem is a result of drawing the chart while the tab is hidden
need to wait until the tab is shown before drawing for the first time
as such, only draw the first chart using the callback...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawMonthChart);
once the callback fires, you don't have to call it again,
you can draw as many charts as needed afterwards
then wait for the tabs to be clicked before drawing the next chart...
here, a switch statement is used on the href attribute,
to determine which tab was clicked,
then draw its chart...
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).attr('href')) {
case '#home':
drawMonthChart();
break;
case '#menu1':
drawMonthAndQuarterChart();
break;
case '#menu2':
drawLeaseAdminChart();
break;
case '#menu3':
drawFourthChart();
break;
}
});
I'm using swipejs (https://github.com/bradbirdsall/Swipe) and want to add a class to certain DOM elements if the slide being slided to has a data attribute.
In this case a slide may have the attribute of data-colour="orange". When sliding to that slide I want to addClass '.orange' to any DOM element that hasClass '.colour'
HTML:
<!-- Slide 1 -->
<div class="slide" data-colour="orange">
<h1 class="center">we know sport</h1>
</div>
<!-- Slide 2 -->
<div class="slide" data-colour="blue">
<h1 class="center">we really know football</h1>
</div>
jQuery:
$(document).ready(function(){
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
callback: function(){
colour.addClass($('.slide').data('colour'));
}
});
});
This performs the desired action, but will only apply the data attribute of the current slide when sliding to the next slide, whereas I would like to work out the data attribute of the next slide, and when sliding to it add that as a class to other DOM elements.
Any help would be greatly appreciated.
Swipe 2.0 adds attribute data-index, so you could write:
$('#mySwipe [data-index='+(mySwipe.getPos()+1)+']').data('colour')
I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
Thanks for your help!!
A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
I had similar problem with your...
I've got important tips from that site, please check it...
http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache
Old but good js plugin.
I have solved this problem with jQuery, changing the jqimg attribute on the picture source:
$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");
On the following :
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">
Finally obtaining:
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">
You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.
This is how you can clean the data from jqzoom:
$('.jqclass').removeData('jqzoom');
Because jqzoom keeps the data in this object:
$(el).data("jqzoom", obj);
Removing the main image and re-appending it should make it work, here is an example
$('a.main_thumb').jqzoom({ title: false });
$("a.thumb").click(function (e) {
e.preventDefault();
var thumbUrl = $(this).attr("href");
var thumbImg = $(this).find("img").attr("data-img");
$(".main_thumb").remove();
$(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");
$('a.main_thumb').jqzoom({ title: false });
});
With the last version of jQZoom you can create galleries (jQZoom can manage it for you).
1.Attach the gallery ID to your main anchor "rel" attribute.
<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
<img src="images/small-1.jpg" />
</a>
2.Manage your thumbnails "class" and "rel" attributes.
The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
<ul>
<li>
<a class="zoomThumbActive" href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-1.jpg',
largeimage: 'images/big-1.jpg'
}">
<img src="images/thumbnail-1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-2.jpg',
largeimage: 'images/big-2.jpg'
}">
<img src="images/thumbnail-2.jpg">
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
The structure of the thumbnail rel attribute is very important.
The base elements are :
gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.