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.
Related
I have an application which uses Fancybox and calls it from 'a' tags as follows:
<a class="link" href="#" data-fancybox="" data-type="ajax" data-src="favourite_record.php" >Link</a>
Within 'favourite_record.php is a 'div' with ID 'modal-fvourite-record' which contains a 'form'.
I need the Fancybox to not close when the within the Fancybox when the 'submit' button is clicked.
<button data-fancybox-close="" type="submit" id="f-submit-button" onclick="Save();">Save</button>
I've tried to handle this by adding the following JS code inside 'favourite_record.php':
<script type="text/javascript">
$('#modal-favourite-record').fancybox({
beforeClose: function(instance, current, e) {
return false;
}
});
function Save() {
document.favourite_record.submit();
}
</script>
However when I open the Fancybox from the 'a' tag and click within the Fancybox, it opens a second Fancybox on top.
How can I specify the 'beforeClose' functionality without it opening a second Fancybox?
I'm still new with angularJS. I've been trying to make a custom button and attach it to my form instead of using regular button. I've tried couple of approaches and so far none of them worked well. now when I press enter inside the input field I get the "results" view perfectly loaded to the main page. but when I click the search button "a" link tag the view loads then disappears instantly. as well as the location of the browser changes to "results" then goes back to "/#/" only. I have no idea why and what's causing this.
here's my html:
<div id="search-container" ng-controller="SearchController">
<form ng-submit="submitQuery()">
<div>
<input id="keywords" name="keywords" ng-model="query.keywords" placeholder="please enter query" value="" required/><br>
<img src="/Images/search-icon.png" alt="Search" title="Search" />
</div>
</form>
</div>
here is my model and ngjs controllers:
var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
$routeProvider.when('/results', {
templateUrl: 'PartialViews/results.html',
controller: 'ResultsController'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
bfapp.controller('ResultsController', function ($scope) {
});
bfapp.controller('SearchController', function ($scope, $location) {
$scope.query = { keywords: "" };
//on form submit
$scope.submitQuery = function () {
if ($scope.query.keywords !== null) {
$location.path('/results');
}
};
//on button click
$scope.submitForm = $scope.submitQuery;
});
well I feel so stupid. I've just found the solution after banging my head for couple of hours. Although this has never been mentioned on any site. All I needed is to remove "#" from <a href="#" id="search-btn" ng-click="submitForm()">. Now it works like charm.
I'm using a jquery menu UI. When the select function is triggered, a class is added to the selected item that highlights it with a color while unhighlighting a previous selection. Within that code I have a button that I want to alert the text value of the selection once the button is clicked. The problem isn't that I can't alert the value, it's that if I select something that is 3rd or 4th on the list, alert boxes will show for the previous third or second line items as well as the one that has been clicked. What code can I use to restrict the alert value down to only the selection that is highlighted with the class that adds color.
<script>
$(function(){
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
var selection = ui.item.addClass('selected').text();
$("button").click(function(){
alert(selection);
}); //closes click()
}// closes select function
});// closes menu
});
</script>
<ul class="menu" id="menu">
<li><img src="" alt="" /><h2>Academic: Art Studies</h2></li>
<li><img src="" alt="" /><h2>Academic: Literature</h2></li>
<li><img src="" alt="" /><h2>Academic: Social Sciences</h2></li>
<li><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></li>
</ul>
You are binding click event to the button multiple times on every select. Remove the button click binding and put it outside the menu function. See fiddle
$(function () {
var selection ;
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
selection = ui.item.addClass('selected').text();
} // closes select function
}); // closes menu
$("button").on('click', function () {
alert(selection);
}); //closes click()
});
Fixed thanks to helpers below, see it in action here: http://bit.ly/15npgSC
I am learning jQuery and have come across a problem which I cannot find a fix for. I have a content slider which when a button is clicked, it slides open, and when the button is clicked again, it closes. This is all fine, the problem I have is that the slider opens automatically when the page loads, not only when clicked. How can I keep it closed when the page loads and have it only open when clicked? It works fine afterwards, its just that as the page loads, it opens. I tried putting $(document).click(function() { at the start which kind of worked but then when clicked it would open and then close immediately after opening with no click. I changed back to the jQuery code below but now have the problem of it opening when the page loads again.
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}).click();
});
If you are able to fix this problem, could you explain why this occurs with my current code and why the fix stops that happening please?
Thanks, Rafa.
Sorry for not posting the HTML code before, but this is it:
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<div>
<p class="slide">Click to open!</p>
</div>
Because you did not post any HTML so I guess '.pull-me' is an 'a' element.
Pls try below code(remove .click()):
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}); // modified here
});
You are triggering click event when the page first load.
Try this:
// HTML
<div class="pull-me">
Click here!
</div>
<div class="panel">
show/hide
</div>
// jQuery
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to open!");},
function() { $(this).html("Click to close!");
});
});
check here in this JsFiddle -> http://jsfiddle.net/GXCuz/1/
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.