I need to create separate pre, next, play and index count out of the current galleria and thumb containers.
I have worked out how to do the pre/next and play/pause but can not tie it into if a person clicks on the thumbnail image.
How do I bind the thumbnail being clicked to update the index count.
i.e.from 5/20 to 9/20 or whatever thumbnail was clicked.
$('.galleria-thumbnails .galleria-image').click(function() {
var current_index = $('.galleria-thumbnails .galleria-image').index($(this)));
});
Hope this helps!
Try as below.
Galleria.ready(function() {
this.bind('thumbnail', function(e) {
$(e.thumbTarget).parent().unbind('click').click(function() {
$('#id_of_hidden_div').show();
});
});
});
Related
I have the new invisible recaptcha working fine, but it puts the badge in bottom left or right corner. You can override this with "data-badge='inline'" and that pulls it into the form. Google is extremely vague on how to actually move it. You cannot hide it as google will not validate your form anymore. Soo...
THE ISSUE is I cannot seem to move it anywhere else on the page. I want to move it to the bottom of the page inside a div I created. Has anyone successfully done this? I tried appendTo but that does not work.
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
Any help would be great!!!
Thank you.
If you want to comply with Google Terms, then you can use a timer to detect the badge and then move it down at the bottom. You have to set the badge property to inline. jQuery appendTo worked for me:
Recaptcha code
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : '<your_site_key>',
'callback' : onSubmit,
'badge': 'inline'
});
};
The code to setup a timer to check and move grecaptcha-badge element
jQuery(function($) {
var checkTimer = setInterval(function() {
if($('.grecaptcha-badge').length > 0) {
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
clearInterval(checkTimer);
}
}, 50);
});
Please check my live example here (http://zikro.gr/dbg/google/recaptcha/). You can see that the badge goes at the bottom inside #g-badge-newlocation element and that it works because when you hit submit, recaptcha triggers the callback function which logs the word "success~".
Morning,
We have literally searched all over Stackoverflow and Google to find this solutions but still don't have the right answer.
We're trying to auto-set the Base, Small and Thumbnail options on the first uploaded image, so when uploading multiple images the first image will always have all three options checked.
If anyone has tried and succeeded with find this answer and advice, Thank you.
It is very easy. Example's here. Replace in root/js/mage/adminhtml/product.js in the end of handleUploadComplete around 120 row code
this.container.setHasChanges();
this.updateImages();
},
updateImages : function() {
with
this.container.setHasChanges();
this.updateImages();
$$('tr#media_gallery_content-image-1 td.cell-image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-small_image.a-center input')[0].setAttribute('checked','checked');
$$('tr#media_gallery_content-image-1 td.cell-thumbnail.a-center input')[0].setAttribute('checked','checked');
},
updateImages : function() {
And enjoy autoselect first image after upload
If you have already uploaded your images and need to set the first one as thumb/base/small try the sql command in this post:
Just follow the instructions given by stereo_world and nhahtdh and then refresh your cache.
Thanks to Fabian and Doug for the groundwork. I just published an extension, which does exactly what you are trying to achieve in a clean way: https://github.com/customgento/CustomGento_AutoSelectImages
It simply adds a JS file on the admin product edit page. In the JS file, the mentioned method Product.Gallery.createImageRow is wrapped, so that the radio buttons can be selected after the first image has been uploaded. Here is the JS "magic":
if (typeof Product.Gallery !== 'undefined') {
Product.Gallery.prototype.createImageRow = Product.Gallery.prototype.createImageRow.wrap(function (parentMethod, image) {
// first call the parent method
parentMethod(image);
// auto-select the radio buttons for the first uploaded image
$H(this.imageTypes).each(function (pair) {
if (this.images.length === 1) {
this.getFileElement(image.file, 'cell-' + pair.key + ' input').checked = true;
}
}.bind(this));
this.setProductImages(image.file);
});
}
Ok, I was doing a simple JQuery animation. When a user will click on an image,it will move to the left by 1000px. Here is the code below:
function cloud2 () {
$('#cloud2').animate({left:'1000px'},40000);
setTimeout(cloud2,2000);
}
$(document).ready(function() {
$('#cloud2').click(function() {
cloud2();
});
});
Very nice nothing is wrong, all is working like a BOSS! When the image reaches 1000px, it stops. All good! What I want now, is to replace the image with another image once it stops when it completes the 1000px animation. How to do that? For example, once it stops, the image changes to another one, let's say image2.jpg for instance.
Thank!
animate() has an event for ending animation.
For example you have something like:
<img src="image1.jpg" id="myimg">
function moveimg() {
$('#myimg').animate({left: '1000px'}, 40000, function() {
$('#myimg').attr('src', 'image2.jpg');
});
}
setTimeout("moveimg()", "2000")
I need to tell you that i'm very new to jquery and still learning, please don't laugh at this. I wanted to have an image gallery on my website and found this beautiful gallery that uses jquery. Here is the link for it:
http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
So there is this snippet that helps the user to click on the album or rather the arrow next to it, to open and close the thumbnail wrapper for the album. All I want is for the first album to open automatically when the webpage is loaded completely. I guess we might have to use the .load() method but I'm not sure how to use it. The code that is inserted here has both the functions to open and close the album, I just wanted to automate the opening part.
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current
//opened menu (if any)
$list.find('.st_arrow_down').live('click', function () {
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({
'height': '170px'
}, 200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click', function () {
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
I tried getting help from the original author of this script but unfortunately she is not responding. Looking forward to your kind assistance. Thanks in advance!!
This 2 lines:
$list.find('.st_arrow_down').live
and
$list.find('.st_arrow_up').live
search for HTML elements with class="st_arrow_down" or class="st_arrow_down"
and bind event "click" on these
This code on
$(document).ready(function () {
var $elem = $('.album').first();
$elem.addClass('current').animate({'height':'170px'},200);
$elem.show(200);
var cnt = $elem.find('.st_wrapper').first().css('display','block');
});
When DOM is ready, you search first album then show animation and display the imgs
Bye
I have a page with lots of images on it, and only want to load extra images on demand. IE if the user clicks on it or mouses over, whatever. Most if not all of the sliders i've seen use the hidden attribute with all the elements getting loaded at once, which would cause undue burden in my case.
I liked: http://nivo.dev7studios.com/ but it has no such feature.
Anyone know of an ajax slider preferably using jquery?
Thanks
I think you can do that with jcarousel:
http://sorgalla.com/jcarousel/
The trick is to pass the images one by one in javascript, not in html, if not, there are always loaded beforehand.
The code would be:
var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];
listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({ auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};
carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
function mycarousel_getItemHTML(item)
{
var img = new Image();
$J(img).load(function () {
// whatever you want to do while loading.
}).attr('src', item.url);
return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";
}