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.
Related
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.
I am using instafeed js to get instagram images to display on my website. I want to pull 5 images and display it together like this example that I have created on codepen. However, the template feature for the instafeed js posed a constraint on how I can organize the images the way that I had on the codepen example since there isn't a way to specifically target each image to a div.
The code on codepen showing how I would want to place each of my images.
<div class="row1">
<div class="column1">
<img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%">
<img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%">
<img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%">
</div>
<div class="column1">
<img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%">
</div>
</div>
Here's the code using instafeedjs
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<img src="{{image}}" />'
});
feed.run();
You can use the mock option to fetch only the image data without updating the DOM. Then use the success option to do something with that data:
var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
clientId: 'xxxxxxxxxxxxxx',
resolution: 'standard_resolution',
mock: true,
success: function(images) {
//iterate over images and add them to the DOM as you wish
}
});
This allows you to display the images in any manner you wish.
I am using magnific popup for popup image slideshow. Below is what i have done.
$('.parent-container').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
// options for gallery
enabled: true
},
image: {
// options for image content type
titleSrc: 'title'
}
});
And this is my HTML Markup
<div class="parent-container">
<ul class="row carousel-inner" style="margin:0; padding:0; background:red;">
<li class="active item gallery-photo" style="margin:0; padding:0; background:red;">
<img class="img-responsive" src="images/gallery-1.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-2.jpg">
</li>
<li class="item">
<img class="img-responsive" src="images/gallery-3.jpg">
</li>
</ul>
</div>
Now, everything is working fine, but i want the image to change automatically, like when i launch the popup first image will be displayed and then it should change automatically. I am not able to fine anything to make it auto in the documentation .
Your efforts will be greatly apprecialted.
I have found it, i am adding this as an answer so that someone else also can benefit out of it.
You just need to add callbacks.
I have added below code after magnificPopup({}) function. And that will solve the problem images will start moving automatically.
callbacks: {
open: {
setInterval(function() {
$.magnificPopup.instance.next();
}, 2000);
}
}
I am developing a phonegap ios application. I need camera to be on initially when page is loaded.
Now on clicking the div, camera is loaded in a new screen with two buttons "retake" and "use".if click on "use" button then the captured snap will be appended to img with id "preview"
code is,
function onCamera() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('get picture failed');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA
});
}
function uploadPhoto(imageURI) {
$("#preview").attr({
src: imageURI,
title: "cam",
alt: "cam image"
});
}
<div onclick="onCamera()">
<img src="Images/camera.png" style="width:50px; height:50px;"/>
</div>
<div class="cam">
<img id="preview" src="css/empty.png" style="width:100%; height:300px;" />
</div>
How can i make the camera load to div with id "preview" when the page is loaded initially?
Please Help, Thanks.
1)I have a bunch of images split in two galleries in fancybox. I am using the code below to split my titles into separate lines. My HTML has a separate div with the titles, each in a div as well. It works, but it is adding titles to both galleries simultaneously, so image 1 gets the same name in both galleries.
How do I insert separate titles for my two galleries?
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
arrows : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}, // helpers
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload
}); // fancybox
}); // ready
2)Also when the image shows up with the multi-line title, and I click "next", and then go back, the title disappears. How can I fix that?
Thanks!
Your code is pretty much a copy of what I posted here, however at the time such post was written, the fancybox version was 2.0.1. Some changes have been done since then (mostly improvements and bug fixes) so we would need to do some changes to your custom script as well as to your html structure. Also you may need to update to the latest version of fancybox (2.0.6 as today)
Assuming that you have grouped your galleries by setting a different rel attribute like:
<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a>
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a>
<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>
1). group the titles of each gallery in different divisions too like this:
<div id="gallery1">
<div>title image 1 / gallery 1</div>
<div>title image 2 / gallery 1</div>
</div>
<div id="gallery2">
<div>title image 1 / gallery 2</div>
<div>title image 2 / gallery 2</div>
<div>title image 3 / gallery 2</div>
</div>
IMPORTANT: notice that I have assigned an ID to the parent container that is equal to the rel attribute of each gallery.
2). Now, for version 2.0.6, we can't use the afterLoad callback as we did it for v2.0.1 (this is what it makes the titles disappear).... we will use beforeShow instead.
So replace this part of the script:
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload
by this:
beforeShow : function() {
var gallery = $(this.element).attr("rel");
this.title = $("#"+gallery+" div").eq(this.index).html();
} // beforeShow
That should do the trick.
PS. I will add a note to the other post for v2.0.6