Image slider gadget

Slide on over : the image slider gadget

On 25/11/2015

In Widget Weekly

With so many widgets, we are going to break down each and explain how it works to the minute detail. The widgets are naturally intuitive, regardless it is nice to have a detailed explanation and see how the widget works and all of its features. On Widget Weekly we are talking about the image slider.

 

Colors and images make your page pop ! And I want to talk to you about both. As you scroll through the image sliders on this page, you will be bombarded with my favorite past time, picking colors. I have a ban from the painting section of B&Q (the British equivalent of Lowes or Menards) for "loitering" in the paint chips section. Which is not justified, as who can really say how many paint samples are too many..

I start thinking how are colors applied to everyday things, what do they mean, who do they communicate to, and then combining colors adds a whole other dimension ? At the end I have over sixty color chips, which according to some is "too much". For instance, when personalizing your site design the colors you use for text or your background all broadcast a message. What do they say, what do they communicate?

Colors upon colors upon colors. I could look all day, but I will spare you and get back on topic

What does this image slider gadget even do?

Image slider

This gadget allows you to add up to ten images with personalizable settings. Easily change the size, style, title text and much more. These images can even be linked to internal or external site pages. This image slider gadget gives you the choice to reach your public through images, adding color and interactive content to your page.

To add an image slider gadget, you will click on Other widgets. As this is a gadget, it is not connected to a certain add-on and you can use them anywhere in the side menu, a page, a block, or in your blog. A pop-up window will appear, with the list of all the widgets or broken down by category. Select Gadgets > Image slider and choose the images and personalize your photo slider.

Adding your images to the slider

Click on add an image, and select the image you want. It will appear to the side, with all the details you can choose to add. Like the title, a link, a description. And to personalize even further you can edit the widget settings.

For instance, for the photo in the example I filled in each field except the URL.

Title : Old world colors : “Traité des couleurs servant à la peinture à l’eau”

Description : One of my secret obsessions, color swatches, and these go way back, click on the link to find out more about this book from a nice blog post.

Link URL : //www.ufunk.net/en/design/traite-des-couleurs/

Fine tune your image slider and go to Widget Settings :

*Please note, as indicated, certain themes do not allow you to edit certain themes. For example, the Bootstrap themes do not allow you to choose the transition effect.

Open links : choose whether the links pop-up, open in a new window, or don't open at all.

Height : Fix the height of the slider, so that it fits your images the best as possible. With over ten options of scroll choice, be left to right, top to bottom, or mosaic.

Transition effect : Choose if your images scroll from left to right, or bottom to top and a handful of other effects.

Navigation : Let your users choose the images they can see, and click yes on navigation, allowing them to click forward or backward for the images.

Pagination display : Decide if you want your images to be numbered, or with buttons, or with clear numbering 1/4, and other options as well.

Transition speed and Image display duration : Choose the speed that your images move from the screen being specific as the second as to how long the image stays on the screen.

Widget settings

Lets do it...

I put four images in the slider below that show color applied, and an amazing book of the first paint tones done by hand in 1692, long before the arrival of my favorite company Pantone. I gave them a title and a short description. And one of the images, is linked externally to an amazing blog post that talks about this ancient book of wonders. After I fine tuned the widget settings. I created this image slider for you (and for me), go on and make your image slider as you want.

My image slider

Conclusion

Add your images to a slider that you can fine tune, and show off your images with the easy to use Image Slider gadget. Paly with the settings, the colors, and the images to see what works best with your page, as adding a slider is fast and easy. If you need a reminder how to add an image to your site, use this helpful tutorial.

Coming next

As always if you want a specific widget explained comment below. Or post your favorite color of the moment (mine is Confetti, although many may insist it is not a color, it is a startling array of colors)

Keep your eye out for the next weekly widget post.

widget design pantone color image