We Keep Coding

How way Revolution slider start (play) again on button click in Version 6.1.8?

I want to replay slider (start again animation)
I have created only 1 slide using Slider Revolution Version 6.1.8
(https://revolution.themepunch.com/) in WordPress
I have set this slider in popup model.
Actually, I want to replay slider on open popup every time.
I have used jQuery('#model1').click(function(){ revapi1.revstart();});
It's working only one time.
Second time it gives
revapi1.revstart();
=> false
=> Slider Is Running Already
So please anyone helps me with replay slider every time when I will open the popup model.

Complete 1st slide.
Duplicate 1st slide. (This for a run (play) on Click event)
Go to in General setting of the slider.
Auto Rotate Slideshow => OFF
Wait for API => On
Click on Save button
Go to in CSS/jQuery of General setting of the slider.
Click on Custom Js Tab
Write below script according to your slider id and Button id.
revapi1.revstart();
var rev_next = 'no';
jQuery('#ButtonID').click(function(){
if(rev_next == 'yes'){
console.log('revstart...');
revapi1.revstart();
rev_next = 'yes'
}else{
console.log('revnext...');
revapi1.revnext();
}
});
Click on Save button.

Asynchronous image loading in the background with javascript (jquery)

I have an application form that shows an image on the left part and some input texts on the right part. The users will have to fill the input texts and click next to show the next image. The problem is that the images are big and it is taking a long time to load and it is time consuming.
What I want to do is when the user starts filling the form from the first image for example, I want to start downloading the next image with ajax asynchronously, by the time the user finishes working on the first image the next image will be downloaded to the client, and when the user clicks next, the browser will show the next image, and so on.
I tried this code but it is not working as I explained. The page is waiting until the both images are loaded then it is showing the first image, any help would be appreciated:
HTML
<img id="currentImage" src="currentImage.png" onload="currentImageLoad()"></img>
<img id="nextImage" style="display: none;"></img>
Javascript
function currentImageLoad(){
$('#nextImage').attr('src' , 'nextImage.png');
}

javascript is synchronous. You can delay the loading of the second image to prevent this:
function currentImageLoad(){
setTimeout(function() {
$('#nextImage').attr('src' , 'nextImage.png');
}, 10); // 10ms
}

You can lazy load the image using jquery unveil plugin.
http://luis-almeida.github.io/unveil/

This is what you need, it's not complicated. JQuery is only used here for simplified selecting / DOM Manipulating.
<!-- click this button to append the image to #image-frame -->
<button id="append-image">append image</button>
<!-- image will go here -->
<div id="image-frame"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
// 1. create a image object and load the image file (this will display nowhere)
var image_url = 'https://image.spreadshirtmedia.net/image-server/v1/compositions/123658308/views/1,width=300,height=300,version=1472099537/evil-maenner-premium-t-shirt.jpg',
image = new Image();
image.src = image_url;
// 2. create a new <img> element and append to the frame
// (the image will load from cache if the previous download is finished, or load from remote if it's not)
$('#append-image').on('click', function(e){
e.preventDefault();
$('<img src="'+image_url+'">').appendTo($('#image-frame'));
});
});
</script>

Opening an existing jQuery lightbox gallery from a link

I have an existing jQuery colorbox gallery that works fine when I click any of the 4 images which is initialized on document ready with:
$(document).ready(function () {
if ($('.gallery-thumbnail').length > 0) {
$('.gallery-thumbnail').colorbox({ rel: 'gallery-thumbnail', transition: 'fade' });
}
});
I also have a link in the page, which I would like to also open this same gallery of images. I thought I would be cute and try to just replicate a user clicking one of the images with $('.gallery-image').first().find('a').click(); which works perfectly and opens the image gallery when I type it in the Chrome Inline Console and hit Enter, but when it is run from the code, it just pops the gallery open with the orange loading GIF which spins endlessly. After that I tried having an onclick handler directly on the HTML anchor which had the code $('.gallery-thumbnail').colorbox({rel: 'gallery-thumb', transition: 'fade' }); which resulted in the same endless loading GIF as before. To ensure that I wasn't going crazy, I hooked the OnClick event handler to a function which runs this code:
function showColorbox() {
$('.gallery-thumbnail').each(function () {
$(this).addClass('test');
});
$('.test').colorbox({rel: 'gallery-thumb', transition: 'fade' });
}
Unfortunately, I still end up with the endless loading colorbox, but I verified that my image anchors all had the class 'test'. Throughout this whole thing - I have also verified that there are no JS errors in the console. Any help would be greatly appreciated.

There's an FAQ entry for this:
http://www.jacklmoore.com/colorbox/faq/#faq-click
Create a separate link for opening a gallery
Lets say you've assigned Colorbox to a set of links in your document,
but you also want to have an "Open Gallery" link that opens the first
item in your set. When "Open Gallery" is clicked, you want to prevent
the default action, then trigger a click event on that first set item.
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});

Download Html5 canvas on click action

I am working on Html5 canvas.
Currently I am downloading image on right click and selecting an option of save image
Now i want to include DOWNLOAD button that can save and downloads the Canvas as an Image.
My code is :
var download = document.getElementById('img-download');
download.addEventListener('click', prepareDownload, false);
function prepareDownload() {
var canvas = document.getElementById("memecanvas");
document.getElementById("memecanvas").src = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
}
This simply enables to download it via right click.
Please help me how to deal with this on Button click action.
Thanks in advance!

Just create a button, give it an ID of, say, "download-button".
Then instead of adding the click event handler to the img-download element, assign it to the button using it's ID.

How to know StartChild when using roundabout.js

Hi I am implementing roundabout with 5 images using roundabout.js that is shown here
http://fredhq.com/projects/roundabout/demos/standard
So I want to know current front image so that i can implement some trigger whenever user click on it. I don't want to enable trigger when user clicks on the images shown behind the front image.
Trigger is launched only for front images and natural behavior happens for rest of the images at back.
I tried using roundabout_startChildren() function in my Html file but not able to know how to exactly use this function.

NOTE:- i have never used this plugin so please instead of down voting the answer correct me if you think i have misunderstood your problem
here is the DEMO
switch the click off for all movable elements as the page loads and on it when the clicked element hasClass roundabout-in-focus and then animateToNextChild
$('ul').roundabout()
$('ul li').off('click');
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
$(this).on('click')
$('ul').roundabout("animateToNextChild")
}
})
EDIT as per the requirement mentioned in comment
DEMO
$('ul').roundabout()
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
window.open('http://www.google.com')
//use --window.location="http://www.google.com"-- to open in same window
}
})