Image slider with description

March 24, 2012 | Posted by: Gopi R | Wordpress plugin | 25 Comments | Video tutorial

Image slider with description WordPress plugin is a Jquery based image slideshow script that incorporates some of your most requested features all rolled into one. Not only image this slideshow have images, title and description. We have option to enable/disable description in the slideshow.

What is jquery? jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. See the plugin live demo in this page.

Features of this Plugin

  • Fade in effect that has the current image fading over the previous one.
  • Slide effect that has each image slid one by one.
  • Each slide can be optionally hyper linked.
  • Each slide can have an optional description associated with it.

See the live demo below

Image slider with descriptionImage slider with descriptionImage slider with descriptionImage slider with description

How to Configure this Plugin?

First install and activate this plugin, after use the given short code into the pages or post to render the slideshow, Separate image management page available in the admin to add, update, delete the images. this is no image upload option instead you have to enter the image path.

Short code

[IMG-SLIDER-DESC:SETTING=1:GROUP=GROUP1]

[IMG-SLIDER-DESC:SETTING=2:GROUP=GROUP2]

Installation Instruction

Method 1

  1. Download the plugin image-slider-with-description.zip from download location.
  2. Unpack the *.zip file and extract the /image-slider-with-description/ folder.
  3. Drop the ‘image-slider-with-description’ folder into your ‘wp-content/plugins’ folder.
  4. In word press administration panels, click on plug-in from the menu.
  5. You should see your ‘image slider with description’ plug-in listed under Inactive plug-in tab.
  6. To turn the word presses plug-in on, click activate.

Method 2

  1. Go to ‘add new’ menu under ‘plugins’ tab in your WordPress admin.
  2. Search ‘image slider with description’ plugin using search option.
  3. Find the plugin & Click ‘Install Now’ link.
  4. Finally click activate plugin link to activate the plugin.

Method 3

  1. Download the plugin image-slider-with-description.zip from download location.
  2. Go to ‘add new’ menu under ‘plugins’ tab in your word-press admin.
  3. Select upload link (top link menu).
  4. Upload the available image-slider-with-description.zip file and click install now.
  5. Finally click activate plug-in link to activate the plug-in.

Frequently asked questions

Q1) How to upload images to the slideshow?

After activated the plugin, you can see the new menu in your admin “Image Slider”. In that we have image management option. Here we don’t have image upload option. Instead we have option to add image path.

Admin → Image Slider (Separate menu, It may available after Setting Menu) → Image Management

Q2) How to update slideshow setting?

Admin → Image Slider (Separate menu, It may available after Setting Menu) → Slider Setting

Q3) Is possible to hide description from the slideshow?

Yes, We have option in the slider setting page.

Q4) Can you explain the short code?

[IMG-SLIDER-DESC:SETTING=1:GROUP=GROUP1]

This short code contain two part, one for slideshow setting and second for image(IMG-SLIDER-DESC this is default text).

SETTING=1   (This means this slideshow will use the first setting, in the admin slider setting page we have two set of setting option, if you want to use second setting the use SETTING=2)

GROUP=GROUP1 (This is to read the images from the image management page, in the image management page we have one drop-down(Select Gallery Group) this is used to group the images. based on the mentioned group it will read the images.

Image Management Help

1) Enter Image Path = where is the picture located on the internet? Put the address here. (Example: http://www.gopiplus.com/work/wp-content/uploads/pluginimages/600×400/600x400_1.jpg)

2) Enter Target Link = when someone clicks on the picture, where do you want to send them – It’s an image link (example: http://www.gopiplus.com)

3) Enter Target Option =

_blank loads the linked page/file in a new, unnamed browser window.

_self loads the linked page/file in the same frame or window as the link.

4) Enter Image Title = this means give the image title. The title will display on the image within the slideshow.

5) Select Gallery Group (This is to group the images) = Select your slideshow group, maximum we can setup 10 group. Whatever pictures you add into this gallery, is what you’ll get, when you call it up using the short code.

6) Display Status = do you want the picture to show in your gallery, yes or no?

7) Display Order = What order should the picture be played in. should it come 1st, 2nd, 3rd, etc.

Download location

http://www.gopiplus.com/work/wordpress-plugin-download/

Donation

All modules, plugins in this website are completely FREE. If you find the software useful please consider making a donation(PayPal). All donations will go towards improving this web website and maintenance.

Donate

Comments (25)

  1. Emily says:
    November 8, 2011 at 9:01 pm

    Hi,

    Great plugin. Is there a way to make the description text sit underneath the image rather than on top of it?

    Thanks.

    Reply
  2. Dave says:
    November 17, 2011 at 9:16 am

    Nice plugin, I’m going to try it out on my current project.

    Hope you will add additional settings and capabilities for this one in the future. Thanks a lot Gopi!

    Reply
  3. Peter says:
    November 18, 2011 at 11:33 am

    Thanks a lot for the plugin…is awesome!!

    I have a question…where should I place the shortcode? And in which form? Sorry for the question but I’m quite new in wordpress and I don’t really know what a shortcode is.

    Thanks a lot in advance,
    Peter.

    Reply
  4. LanguageXpress says:
    December 2, 2011 at 11:59 pm

    How do you make image link not required? The description says this is optional.

    How do you remove the description bar? I am not using title or description text and I don’t want that semi-seethrough black bar across the image.

    Thanks

    Reply
  5. Joaquin says:
    December 6, 2011 at 12:27 pm

    Hi,

    Fantastic work, thank you!

    I’m trying to display this plugin in a front page (not in a post). I’m trying to do this with do_shortcode WordPress function, but it doesn’t work. Could you help me?

    Thank you!

    Reply
  6. ankit says:
    December 8, 2011 at 6:22 am

    hello,
    your short code is not working.
    i put up that short code in index.php page under “” tags but itz not working….can u explain why?
    i have already setup all the slides etc.

    thanks in advance.

    Reply
  7. Shreeja N says:
    December 18, 2011 at 12:25 pm

    Hi,
    Works gr8, but we can’t have more than one slider in a single post. Grouping images in two different sliders on same post gives lots of bugs, like images overlapping each other, text of each slider gets displayed in the other etc.

    Thanks.

    Reply
  8. Niki says:
    December 20, 2011 at 6:12 pm

    Hi,
    this is great plugin. can i move image title, description and number out of the image and display above or below the image ?

    or may be display on right hand side…?

    Thanks

    Reply
  9. Ayush Pateria says:
    January 3, 2012 at 1:22 pm

    Shortcode not working

    Reply
  10. Amanda says:
    January 4, 2012 at 7:16 am

    to anyone wanting to get rid of the black bar across the image, go to your ftp client, find plugins/image-slider-with-description/images/slide-bg.png and delete it.

    oh, and to use the shortcode in a template,

    it works for any shortcode

    Reply
  11. Thiyagarajan Veluchamy says:
    January 12, 2012 at 2:21 pm

    Hi,

    short code not working, how to do it?

    Thanks Advance

    Reply
  12. Alyssa says:
    January 23, 2012 at 3:29 pm

    How do I add this image slider into header.php? Do you have a php code? I am only finding the shortcode but I do not want the slider in my posts, I want it in the header. Thanks!

    Reply
  13. Inder says:
    January 26, 2012 at 7:47 pm

    Yes, how to use it as image slider into header position without a code. However it should have description insert option that ‘Header Image Slider’ doesn’t have in it.

    Reply
  14. Hat Trick says:
    January 30, 2012 at 3:38 am

    Hi admin,

    Can you give me the php function snippet of code that would allow me to run this plugin from my index template file?

    I can’t use the shortcode.

    Thank you!

    Reply
  15. Rok says:
    February 1, 2012 at 12:12 pm

    Hey, is it possible to set image show time? I would like much faster slideshow..

    tnx

    Reply
    • Ike says:
      February 28, 2012 at 2:01 am

      See line 30 in \wp-content\plugins\image-slider-with-description\js\script.js

      at: 10 * 1000, /* change 1000 to control speed*/

      It says change the 1000 but the 10 at the start is equivalent to seconds so change that to whatever duration you want and refresh your page and the transition time will change.

      Reply
  16. pebe says:
    February 25, 2012 at 12:58 pm

    hello, i have one question. i made some mods on your plugin, but did not find the way, how to align center the images in my slideshow. could you tell me, where to mogify the code? thx!

    Reply
  17. eduardo says:
    April 10, 2012 at 6:47 am

    Is it possible to remove the dark bar where i imagine descriptions and other text goes? There doesn’t seem to be an option to remove it or at least make it transparent. Can this be done?

    Reply
  18. Wilton says:
    May 10, 2012 at 6:36 pm

    Here is reply for eduardo and Mark
    Amanda
    January 4, 2012 at 7:16 am

    to anyone wanting to get rid of the black bar across the image, go to your ftp client, find plugins/image-slider-with-description/images/slide-bg.png and delete it.

    Reply
  19. Wilton says:
    May 10, 2012 at 6:44 pm

    How do you add more images to a group?

    Reply
  20. Anni says:
    May 14, 2012 at 1:27 pm

    Hi,
    Can you move the description panel/black bar to the bottom of the slide?

    Reply

Leave a Reply