I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});
try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....
You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>
You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.
Related
I'm using Galleria (http://galleria.io/) and generating images to the gallery dynamically, once in a while there's a situation where a gallery includes just one image, at that point I'd like the gallery to appear without the thumbnail container, how could I do this?
Any help greatly appreciated!
My current script for initializing is:
Galleria.loadTheme('assets/js/galleria.classic.min.js');
// Initialize Galleria
Galleria.run('#galleria', {
show: selectedIndex,
showInfo: false,
swipe: true,
imageCrop: false,
responsive:true,
showCounter:true,
thumbnails:true,
lightbox: true,
trueFullscreen:true,
extend: function() {
this.bind(Galleria.IMAGE, function() {
$('#description').html(this.$('info-title').html());
$('.galleria-lightbox-title').html(this.$('info-title').html());
})
}
});
Try thumbnails: $("#galleria img").size()>1
$('#galleria img:only-child').hide();
You need to select the child element of the parent when it is only singular - one thumbnail - the jQuery selector only-child allows this - then chain the statement to hide() to hide it.
I'm trying to use the Twitter Bootstrap popover plugin to bring up a popover when a <span> element is clicked.
All the files are including on the page, including bootstrap-tooltip.js and bootstrap-popover.js. This is my jQuery code to call the popover:
$('#supported-hosts').popover({
'animation': true,
'html': 'test',
'trigger': 'click'
});
However when I click the element nothing happens. There's no Javascript error in the developer console or anything.
I've also tried doing this to no effect:
$('#supported-hosts').on('click', function() {
$(this).popover('show');
});
I'm pretty clueless as to what's wrong because as far as I can tell from the Bootstrap docs I'm using it correctly.
Edit: Also the HTML is simply a span element:
<span id="supported-hosts">Supported filehosts</span>
In order to show a pop-over, you need to indicate what its content should be.
You can do this on the html tag itself:
<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>
Or with JavaScript:
$('#supported-hosts').popover({
'content': 'Popover content'
'animation': true,
'html': 'test',
'trigger': 'click'
});
By default, the pop-over will use the title attribute of the element that triggers it, so you can use that as well, depending on your needs.
I'm building some website with image gallery.
There is a normal colorbox start up script
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
It starts when I press on hyperlink covering img tag.
But I also have some img tags, without hyperlinks fitting them. And in that way default power up script is not working.
But I have different one which works partially .
$('.colorbox').click(function() {
$(this).colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current},
$s_total[$lid]: {total}', maxWidth: 960,
maxHeight: 640, scalePhotos: true,
href: $(this).attr('src')});
});
This one powers up both img tags inside hyperlinks and img tags without hyperlinks.
And now the problem. In this way there are no arrows and info about prev, next image, and number of total images.
Is there any way out of my problem ?
Again I repeat, I have 2 types of pictures in my database.
img tags put into hyperlinks ( default colorbox way )
img tags without hyperlinks but with a colorbox class ( strange way )
Any way to combine these 2 types under one powering up normal working script ?
You should be able to do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
$('img.colorbox').colorbox({href:function(){return $(this).src; }});
You could also do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5', current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}', href:
function(){
return this.src || this.href;
}});
... how about this:
1 - group ALL images by some class selector
2 - use the onLoad callback to check for and set the href value for images that are not wrapped by a hyperlink
I'm trying to open Shadowbox from within a radio button onclick event on a asp.net web form without success. I was initially opening it using a button click which worked fine, but now need to make sure it happens when the radio button option is selected. I then tried to click the button in javascript (button.click()), but that only worked in IE and Newer versions of firefox. So I have opted to use Shadowbox.open, but it is causing some issues. Here is my code:
if (yes.checked == true)
{
var url = 'http://localhost:52963/items.aspx';
Shadowbox.open( { content: url,
type: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
}
This just seems to bring up the overlay but doesn't open the web page inside it. Anyone know where I'm going wrong?
Apparently I needed to add a player as well as a type. So the amended code is this:
Shadowbox.open( { content: url,
type: "iframe",
player: "iframe",
title: "sbTitle ",
options: { initialHeight:350,
initialWidth:450,
loadingImage:"loading.gif",
handleUnsupported: 'link'
}
});
I had a lot of trouble with this, I tried firing click using .trigger('click') from jquery , but that didnt work in chrome (worked in firefox)
Turns out the answer is pretty simple, similar to e-on answer, but dialed down.
Your images are in a normal shadowbox gallery
<div class="gallery">
<a href="/img1.jpg" rel="shadowbox[gallery1]" >
<img id="Image0" src="/img1.jpg" />
</a>
<a href="/img2.jpg" rel="shadowbox[gallery1]" >
<img id="Image1" src="/img2.jpg" />
</a>
</div>
Then your clickable link
Click to view all images
I wired up the clickable link via jquery in a document.ready call
$('.galleryLauncher').click(function () {
//gallery to launch
var id = $(this).attr('gallery');
//get the first item out of the cache
var content = Shadowbox.cache[1].content;
//default options object
var options = {};
//now we can open it
Shadowbox.open({
content: content,
player: "img",
gallery: id,
options: options
});
return false;
});
Anyone ever loaded images dynamically into jquery iViewer? Currently, it's setup as
$(document).ready(function(){
$("#images").iviewer(
{
src: "images/voices/big/page01.jpg",
update_on_resize: false,
initCallback: function (object)
{
$("#in").click(function(){ object.zoom(1);});
$("#out").click(function(){ object.zoom(-1);});
$("#fit").click(function(){ object.fit();});
$("#orig").click(function(){ object.toOrig();});
$("#update").click(function(){ object.update();});
}
});
});
so you have to put different instances on the page in order to show more than one image. Currently i have the "scrollable" plugin for thumbnails and i wanted to be able to dynamically load their large images into iViewer plugin. Anyone got any ideas?
Current example here: http://orangepxl.com/yasuko/voices.php only 1 image will work... :(
Please, take the last version of the plugin from the github. Iviewer is now a jQuery UI widget and it has loadImage method, so you can show different images in a single widget.
You could load new image with code like this:
jQuery('.iviewer_selector').iviewer('loadImage', 'http://url.to/image.png');
See https://github.com/can3p/iviewer for examples.
You can load All of them and, can hide them using jquery, and show them according to the click event for Thumbnails.
Do the iViewer for all of the images and hide them using jquery or just css,
and when clicking on the thumbnails, show only the corresponding image, and hide rest