Insert jQuery slider to Drupal page

Question:

I am using your Amazing Slider. I am able to use the jQuery slider in the theme of my website now, but that’s not what I really want. I want to put sliders in articles. Is this possible?

Answer:

Yes. You can view Step 4 “Insert the jQuery slider to your Drupal page” of this tutorial:  https://amazingslider.com/how-to-insert-jquery-slider-to-drupal/

Basically there are three steps:

1. In the Dashboard, click Modules from the top menu, then enable “PHP filter” module.

2. In the page editor, find the dropbox menu “Text format” and change its value to “PHP code”.

3. You can then enter the PHP code to embed the slider to your Drupal page:

<?php echo amazingslider1_output(); ?>

 

Add multiple images at once in Amazing Slider

Question:

I am using Amazing Slider. I wonder is there a possibility to add multiple images at once – or you have to select each image individually?

Answer:

Yes.

In the Add Slides dialog, click the “Add images” button, then you can select multiple images and add them at once.

If you are using Windows, you can hold ctrl or shift key to select multiple files. If you are using Mac, you can hold command or shift button.  It’s just like how you do in Windows Explorer or Mac Finder.

How to create a jQuery slider that works on pages of different folder levels

Question:

I created a JavaScript Slideshow with your slider maker, it works perfectly on the home page http://www.mysite.com/index.html , but when I tried to embed it into another page http://www.mysite.com/sales/product.html, it does not work. I have copied the same HTML codes to this page.

Answer:

By default, HTML codes created with Amazing Slider will use relative URL. The problem is, these two pages have different folder levels, so the relative URL in the two pages will go to different absolute URL and will cause problems.

If you would like the same jQuery slider works on pages of different folder levels, when creating the slider, you can choose to use the absolute URL format.

In the software, Publish dialog, Add absolute URL field, you can enter:

http://www.mysite.com/

In this way, the software will add a prefix http://www.mysite.com/ to all links in the HTML codes, then the slider will work no matter where you place it.

Some tips:

An absolute URL is a link address starting with http:// or https:// and the domain name. For example, http://www.mysite.com/folder/slider.html.

A relative URL is a link without the http://, https// and the domain name. For example: folder/slider.html.  It’s an address relative to the current webpage address. The web browser will dynamically calculate its absolute value according to the URL address of the current webpage.

Customize the color and background of text

Question:

Can I have control over the text color and background that appears with the text in a slide?Can I remove the translucent white background and just have white or black text on a slide?

Answer:

Yes, in the application,  Skins dialog, Text effect tab, you can customize the CSS codes to change the text color and background.

Is there an event for Amazing Slider?

Question:

Is there an event for Amazing Slider when slide changes?

Answer:

Yes.

$(document).ready(function(){
   $("#amazingslider-1").bind("amazingslider.switch", function(event, previous, next){ 
     console.log("previous:" + previous);
     console.log("next:" + next);
   });
});

In the above codes, the amazingslider-1 is the div ID of the slider. If you have specified a different ID in the publish dialog, you need to change the number accordingly.

Can I add Amazing Slider and Amazing Carousel to one page?

Question:

I am using both the Slider and Carousel program.

I cannot get a slider and a carousel to run on the same page. Is this possible?

Answer:

Yes. You can add the slider and the carousel to one page.

When adding the head section codes, you need to remove the second line of jquery.js (marked by red in the following code snippet):

<!-- Insert to your webpage before the </head> -->
 <script src="sliderengine/jquery.js"></script>
 <script src="sliderengine/amazingslider.js"></script>
 <script src="sliderengine/initslider-1.js"></script>
 <!-- End of head section HTML codes -->
 <!-- Insert to your webpage before the </head> -->
 <script src="carouselengine/jquery.js"></script>
 <script src="carouselengine/amazingcarousel.js"></script>
 <link rel="stylesheet" type="text/css" href="carouselengine/initcarousel-1.css">
 <script src="carouselengine/initcarousel-1.js"></script>
 <!-- End of head section HTML codes -->