Squarespace is an online website builder that enables you to create and maintain websites and blogs. This tutorial will guide you how to add a slider created with Amazing Slider to your Squarespace website.
There are three steps in this tutorial:
Question:
I have more than 100 images in my slider. I noticed that it loads all images on start and makes it very slow to operate unless all the images are loaded. Is there a way to stop loading all the images but just the one which is at the start?
Continue reading
Question:
I am wondering if there is a way to disable right click so users can’t view or download individual images?
Answer:
You can disable right click on images with JavaScript but it won’t prevent people from downloading them.
In fact, there is no way to stop people downloading the images. As long as the image is public on your webpage, no matter what you do, there will be a way to download it. I think the only way to protect them is adding some watermarks to the images.
Anyway, to disable right click, you can add the following JavaScript to your webpage. The script will disable right clicks on images.
<script>
(function($){
$(document).on('contextmenu', 'img', function() {
return false;
})
})(jQuery);
</script>
Question:
I wonder is there a way to delay the execution of the Amazing Slider? I would like to display the slider 5 seconds after the page is loaded.
Answer:
The application generates a file intslider-1.js inside the subfolder sliderengine. You can open the js file with your text editor, and wrap the call amazingslider with a setTimeout function.
The demo code is as following:
setTimeout(function() {
jQuery(“#amazingslider-1”).amazingslider({
sliderid:1,
jsfolder:jsFolder,
…..
textformat: {
}
});
}, 5000);
Question:
We have purchased the enterprise version today. Need you help with an issue.
We are trying to initialize the slider dynamically on a button click. In this case the content of a div are loaded as below on the button click and we want to initialize the slider after that. Can you please help in how to do that?
Answer:
A demo for this question is at https://amazingslider.com/demo1/index.html.
To check the code, in Google Chrome, you can click menu View -> Developer -> View Source, and view the source code.
To dynamically initialise the slider after the page is loaded and in a button click, you can take the following steps:
1. In the head section code, remove the reference to initslider-1.js. It’s because the slider is initialised in the JavaScript file initslider-1.js.
2. Define a JavaScript function initSlider in your webpage, and copy the code block jQuery(“#amazingslider-1”).amazingslider from initslider-1.js to this function. When copying the code, please make sure it’s copied correctly and isn’t broken.
In the code, amazingslider function call, there is a parameter jsfolder, which is the folder of the file amazingslider.js located. You need to replace the value to your own value. In our demo, we have change the code from:
jsfolder:jsFolder,
to:
jsfolder:"https://amazingslider.com/demo1/sliderengine/",
It’s because in our demo, the amazingslider.js file is located at https://amazingslider.com/demo1/sliderengine/amazingslider.js.
3. Call the function initSlider in the button onclick event:
<button id="initbutton" onclick="JavaScript:initSlider();">Initialise and display the slider</button>
Question:
Hi, how can I remove the white line below?
Answer:
In step 2, Skins dialog, Slider tab, uncheck the option “Show progress bar”.
Question:
After working with your software (that it looks good) for almost 1 hour , I saved the project. When I open it it’s empty. I tried several times the same and it comes empty. But the file size is like 500 Kb.
Answer:
One possible problem is that there are special characters in the image filenames.
Please only use A-Z, a-z, 0-9, underscore _ and dash – in the image and project filename.
Special characters, for example, accented letters, &, *, !, # will cause problems in the software and in the web browser.
Question:
Hi there — Can I insert the slider into a Volusion.com e-commerce template web page on a Standard licence, or do I need the Enterprise version?
Answer:
Yes, please view the tutorial: https://amazingslider.com/how-
Question:
Hi, where is the code I am to paste into my web site? The generated slider.html is blank. I am using a Mac.
Answer:
On Mac, if you directly open the slider.html with TextEdit, it will look blank.
It’s because TextEdit on Mac is not a plain text editor or HTML editor. If you want to use TextEdit, you can follow this tutorial to make it as an HTML editor: http://mac.tutsplus.com/tutorials/productivity/quick-tip-configure-textedit-for-coding-html/. Then you can use it to open the slider.html file and copy the HTML codes.
You can also download the freeware TextWrangler from Mac AppStore: https://itunes.apple.com/au/app/textwrangler/id404010395?mt=12. It’s a much better option.
Question:
I am embedding the slider to my webpage using an iframe:
<iframe width=”1280″ height =”720″ src=”http://mysite.com/slider.html” scrolling=”no” border=”0″ frameborder=”0″ allowfullscreen></iframe>
When I click the slider, the links open inside the iframe small box.
Answer:
In the application, step 1, Add Slides dialog, when you assign the web link to an image, in the bottom Target, choose the value “_top”.
In this way, the web link will be opened in the parent window, rather than inside the iframe.
