Question:
Is there a way to change the pixel dimensions of the thumbnails on the Vertical Carousel?
Answer:
In Step 2, Skins dialog, Navigation tab, you can change the value of Width and Height.
Author Archives: amazingslider
Add web link to slider images
Question:
Hello, I’m interested in using your slider but can you let me know if I can make the images link to different pages on my site please.
Answer:
In Add Slides dialog, after you add your images, click an image and select it, then you can enter your link in the bottom fields.
You can enter a different link for each of your images.
Change the size of slider
Question:
I am about to purchase your excellent product.
My question, Can I make the size of the slider smaller? I have the size of the slides set at 160 x 120 and it looks too big.
I have many images that I want to put into the slider, do they have to be a specific size and resolution? In the program some of them appear not to fit the size or the quality looks very bad.
Looking forward to working with you.
Answer:
In the software, Step 1, Add Slides dialog, you can change the width/height there.
When you add images to the slider, if your original image is smaller than the size of the slider, it will be stretched, and may not look good.
So, it’s better your original images can be the same size or bigger than the slider.
jQuery slider event and API
Question:
I’ve bought your company’s product.
My situation is I have two section which are video slide section and picture gallery section. Once video is selected, i want to show pictures which are related to the video. To do that, i need to know which video is selected. However, i don’t know where to get that in amazingslider.js
Could you please help?
Answer:
You can hook the event amazingslider.switch of the video slider, then in the event handler, you can call the API of picture slider to switch to the specified image.
The code is like following:
$(document).ready(function(){
$("#amazingslider-1").bind("amazingslider.switch", function(event, previous, next){
$("#amazingslider-2").data("object").slideRun(next, false);
});
});
In the above code, amazingslider-1 is the id of the video slider. amazingslider-2 is the id of the picture slider.
Positioning the jQuery slider FeatureList style
Question:
I have used the FeatureList style.
In the software program the thumbnail images to the right of the main image can be clicked to skip to that image.
However once I have uploaded this to our website you cant click the thumbnails to skip to the corresponding image.
Answer:
You need to change the margin value of the Amazing Slider div, leave some space for the right side carousel.
In your webpage, try to find the following HTML code:
In your webpage, find the following code:
<div class=”slide-container”>
<div id=”amazingslider-1″ style=”display:block;position:relative;margin:16px auto 32px;”>
Change it to (change marked by red):
<div class=”slide-container”>
<div id=”amazingslider-1″ style=”display:block;position:relative;margin:16px 228px 32px 0px;“>
In the above code, 228 is the width of the right side carousel.
3D effect not working on Internet Explorer
Question:
The 3D horizontal effect runs differently on internet Explorer. Is this normal?
Answer:
The 3D effect does not work on Internet Explorer, because Internet Explorer has a poor support for CSS3. It will fall back to slice effect by default. You can also change the fallback effect in Step 3, Transitions dialog.
Text outside jQuery Slider not showing on webpage
Question:
I have the commercial version of your software.
I am attaching the most recent saved version of our project. As you can see in the project, each of these images has a title and a description. However, neither are showing on the website. It is imperative that the title and the description DO NOT overlap the image as these are of original art work. I have changed the slider skin numerous times and when I change the Text Effect to overlay the image – it is there. However, if I change the Text effect to be outside the image either on top or the bottom, it does not show.
Please let me know what the issue might be.
Answer:
The text is actually there on your webpage, but the parent div of the slider has a “overflow:hidden” css property, so the text is hidden.
You can find the following HTML code in your webpage:
<div style=”margin:0px auto;max-width:350px;”>
<!– Insert to your webpage where you want to display the slider –>
<div id=”amazingslider-1″ style=”display:block;position:relative;margin:0px auto 0px;”>
Change it to (change marked by red):
<div style=”margin:0px auto 60px;max-width:350px;”>
<!– Insert to your webpage where you want to display the slider –>
<div id=”amazingslider-1″ style=”display:block;position:relative;margin:0px auto 0px;”>
Insert Amazing Slider and Amazing Audio Player to one page
Question:
I am using Homestead and love using your product. Until now, I have only used the commercial slider. I downloaded the free version though today of the Audio player, to make sure it would work in conjunction with the slider before I purchased it. I am having difficulty having both of them show up together though. When I upload each one by themselves they work, however, when I have them both on there at the same time, only the slider shows up. I tried to change the ID on the audio player, but that did not do anything. What would I need to do to make those work properly on the same page? I uploaded each slider to its own folder as well so they are not in the same folder.
Answer:
The head section of the slider may be look like:
<script src=”http://amazingslider.homestead.com/homeslider/jquery.js”></script>
<script src=”http://amazingslider.homestead.com/homeslider/amazingslider.js”></script>
<script src=”http://amazingslider.homestead.com/homeslider/initslider-1.js”></script>
The head section of audio player may be look like:
<script src=”http://amazingslider.homestead.com/homeplayer/jquery.js”></script>
<script src=”http://amazingslider.homestead.com/homeplayer/amazingaudioplayer.js”></script>
<link rel=”stylesheet” type=”text/css” href=”http://amazingslider.homestead.com/homeplayer/initaudioplayer-1.css”>
<script src=”http://amazingslider.homestead.com/homeplayer/initaudioplayer-1.js”></script>
When adding both code snippets to your webpage, you need to remove the second jquery.js line. That’s, if you add the code of slider first, then follows the player code, you need to remove the jquery.js line in the player code. If you add the player code first, you need to remove the jquery.js line from the slider code.
Image Quality in Responsive Slider
Question:
I am a registered member.
I have the image slider on my webpage.
The images displayed seem to be of less quality than the original picture used. I have attached one of the images that are have been used for you to compare.
Answer:
In the application, Add Slides dialog, you have setup the size of the slider as 280 * 200. But on your webpage, the size of the slider is 333 * 238, that’s, bigger than the original size.
Since the slider is responsive, the images are stretched to 333 * 238.
To fix the problem, in the application, you can setup the slider size as 333 * 238 or a bigger size.
If you would like to disable the “responsive”, in the application, Step 4, Options dialog, uncheck the option “Create a responsive slider” (Version 3.2 and after) or “Support responsive web design” (Version 3.1 and before).
Cannot control the height and width of slider in website
Question:
I am using photoshop slices to create my website.
When I paste the amazing slider codes, the slices go all over the places. Can you tell me where I can control the height and the width of the amazing slider?
I am not a professional user and not an expert on scripting.
Amazing program by the way, makes the job a lot easier for lay users like myself.
Thanks…
Answer:
Do you mean the jQuery slider extends itself to full width of your page?
To fix the problem:
1. Define the width and height of the slider in step 1, “Add Slides” dialog.
2. In Step 4, Options dialog, there is an option “Support responsive web design”, please uncheck this option. This option will be renamed as “Create a responsive slider” in next version.