EIS WordPress Plugin Updated Posted in On 10th January 2013 | 52 Comments

eis-blog

Eventually, I hook myself to create a plugin for slideshow , firstly I want to create the plugin in my own code but at last after surfing in the web I found cool tutorial on the tympanus.net ” Elastic Image Slideshows”, I use this tutorial and the jQuery plugin for creating EIS Plugin…

wp-eis-header-2

Download sourceView demo

First of all  I appreciate   Mary Lou (Manoela Ilic)  for the  best and unique tutorials on the web.  This tutorial encouraged me to create  a plugin .  and also I thank Hadi Karimi and Andi Mayr for the photos ( Best Artists ).

Well, let me to introduce this plugin, firstly this plugin is based on ajax that means you need to enable the javascript in your web browser. This plugin is compatible to 3.5.1 and the minimum version for working properly is 3.4 or higher.

wp-eis-screenshot-1

I illustrate how the plugin works, first you need to download the plugin from wordpress plugins repository then you should extract the plugin in plugins directory. And then activate the plugin just as rule ….
Now in the WordPress panel you have a menu ( WP EIS ) under the settings menu

wp-eis-screenshot-2

If you want to create a slideshow you must first go to Add Slideshow under WP EIS menu. You have Two options Advanced Mode and Basic Mode. In the pictures I show both of them.

Basic Mode :

wp-eis-screenshot-3

Advanced Mode :

wp-eis-screenshot-4

Tip: YOU SHOULD USE A UNIQUE NAME WITHOUT ANY ASCII CHARACTER EXCEPT ( _ ) OR EVEN SPACE AND ALSO USE LOWERCASE WORDS, LIKE my_slider OR ANYTHINGS LIKE THIS PATTERN.

Then you need put your images into slideshow that has been created. You need go to the Add Images under WP EIS menu.

wp-eis-screenshot-5

When you adding your images you show the fields for titles and order, In the new version titles sections are optional but order section is required.

wp-eis-screenshot-6

This is it your slideshow with images already has been created :) . at the end for managing ( to edit or delete ) your slideshows you just go to All Slides under the WP EIS menu.

wp-eis-screenshot-7

Now How use this slideshow in your theme or in your post? Well this is so simple in the All slides page you have two options for each slidehsows, if you want show the slideshow in the post just use Shortcode Function
for instance in my All slides page I had one slideshow with name of theme_slider if I want to use this slideshow in my posts I use one of the Shortcode Functions 

[wp_eis id="1"]
[wp_eis id="1"] My slideshow [/wp_eis]

Or if I want to use this slideshow in my theme I use Theme Function 

<?php echo do_shortcode('[wp_eis id="1"]'); ?>

Tip: For showing the slideshow you should put this

<?php wp_enqueue_script("jquery"); ?>

Right before the

<?php wp_head(); ?>
</head>

And also your theme should be used these codes

<?php wp_head(); ?>
<?php wp_footer(); ?>

For managing all images go to All Images.

wp-eis-screenshot-8

IF YOU WANT TO ADJUST THE HEIGHT OF IMAGES YOU HAVE THERE OPTIONS

1 – Set all height of images before putting them into slideshow ( this the best opiton )
2 – Use this style for setting the height but you should consider that you might be lost part of your images.

.eis-wrapper { height: 100px; }
.ei-slider {
    height: 100%;
    max-height: 100px;
}

3 – If you are a developer you can change images resize processing in jquery-eislideshow.js document with changing the process of these two methods 

_setImagesSize
_getImageDim

If you are not a developer I suggest you do not use this part for editing .

Have Good Time … ;) .

If you have any questions about the plugin you can ask here. If you liked the plugin you can be one of my facebook fans.

52 thoughts on “EIS WordPress Plugin Updated”

  1. soroush

    درود و خسته نباشید
    متاسفانه اجباری باید یه عنوان واسه هر عکس قرار داد
    که مشکل بزرگتر اینه که فارسی هم نمیشناسه واسه نمایش
    چکار باید کرد .ممنون میشم راهنماییم کنید

    Reply
  2. Yishun Lin

    Another thing. I think if you made the entries to h2, h3 optional, not “required”, it would be better. Sometimes a blog does not want text lines on top of the slide images. Is that right?
    Thanks a lot for the great plugin!

    Reply
    1. Mehrdad FI Post author

      Hi, Yishun Lin.
      You are right. So in the version 1.3.3 that published 2 hours ago I removed required mode for titles but still order field is required.
      I recommend to you to update into new version 1.3.3 ( fixed some errors in javascript ).
      thanks.

      Reply
  3. Yishun Lin

    I love the plugin WP EIS. It is simple and easy to use. It works!
    Thank you very much.
    I have a question though. I use the slider built with the plugin in the theme header. Can I reduce the height of the slide, say to 150 or even 100px?
    Any advice will be appreciated.

    Reply
    1. Mehrdad FI Post author

      You can reduce the height of the slideshow but you should consider that might be lost some part of your images.
      you have two options

      • Set all images to equal height
      • Use this style …
      .eis-wrapper { height: 100px; }
.ei-slider {
	height: 100%;
	max-height: 100px;
}

      Tips : the .eis-wrapper height and .ei-slider max-height should be equal.

      Reply
        1. Mehrdad FI Post author

          If you want to change the images resize processing you can manipulate this two methods 

          _setImagesSize
          _getImageDim

          in the jquery-eislideshow.js file , but you should consider that you might be lost your slideshow procedure (b/c this is a responsive slideshow ).
          However my recommendation is use the css styles like thing, I told you before.

          Reply
  4. سلام

    سلام 
    خسته نباشید 
    قسمت آپلود عکس و مابقی تنظیمات در پنل مدیریتی من هست ولی تو صفحه اصلی سایت نیست . 
    چکارکنم؟

    Reply
  5. Reddo

    Hey, Mehrdad
    I found a bug you might want to fix asap. 
    in the file wp-eis-shortcode.php on line 129, you might want to remove the last comma, the one from
    thumbMaxWidth: ".$get_eis->thumb_max_width.",\n" : '';
    as it messes the slider up in IE7.
    Also is there a way to fix the thumbnails in ie, because now they’re always visible and that kinda sucks :(
    Let me know what you find.

    Reply
    1. Mehrdad FI Post author

      Ya I know;) But about internet explorer , Infact ie is junky browser and I never consider it, But I think the slideshow works fine in IE9 and also IE8.
      Also you can add a condition style for later version of IE8 

      <!--[if lte IE 7]>
<style type="text/css">
.ei-slider-thumbs {display: none;}
</style>
<![endif]-->
      Reply
      1. Reddo

        I’ve already added a conditional stylesheet for ie7, but you should fix the comma error anyway, as it renders the whole plugin useless in ie7. I hate ie as much as any other web developer, but we have to consider the clients’ needs 1st.

        Reply
        1. Mehrdad FI Post author

          Hi Reddo,
          I know, so I removed this comma but after searching on the javascript file I found some little problems that might be the reason for future problems, Well I fix them and as always I developed the plugin with new features ;) . the new version (1.3.3) will be published asap.

          Reply
          2. Yishun

            Hi Mehrdad,
            I reduced the height of the slides with methods you kindly provided. Thanks.
            The sliders shows on both Google Chrome and IE9. However on IE9 the slides are not moving, instead only the first slide shows and stay. Any advice will be greatly appreciated.
            http://www.aafmua.org
             

          3. Mehrdad FI Post author

            Hi, Yishun.
            First of all your js files are compressed and It is difficult for me to find the problem, But I think the problem came from the position of your js files.
            That means, the default.include.fc4f99.js is placed before invoking the jquery ( default.include-footer.e9db4a.js ), this script

            <script type="text/javascript" src="http://aafmua.org/wp-content/cache/minify/000000/80f6d/default.include.fc4f99.js"></script&gt;

            Must be placed , right after the 

            <script type="text/javascript" src="http://aafmua.org/wp-content/cache/minify/000000/80f6d/default.include-footer.e9db4a.js"></script&gt;
    1. Mehrdad FI Post author

      Hi
      I recommend that you deactivate the plugin then delete it and try agian download the plugin and install it ( use it ) .
      Please put your feedback here.
      thanks.

      Reply
  8. Reddo

    Hi. Can I ask how to order the slides according to the Order number I’m required to enter? It just shows the slides in the order I uploaded them anyway. Seems like that Order field does noting… Can you please enlighten me?

    Reply
    1. Mehrdad FI Post author

      There was a problem about ordering, but I think this problem has been solved in the newer version 1.3.2 ( you can use it now ). And also has been added hyperlink into titles ;)

      Reply
    2. Mehrdad FI Post author

      Hi,
      There are some problem about your using. First of all you should use these values ( sides or center ) for animation field as I mentioned in description under the ” Animation Type: ” field . And another problem is, do you put this code < ?php wp_enqueue_script(“jquery”); ?> correctly before tag and also before < ?php wp_head() ?> ?

      Reply
          2. Mehrdad FI Post author

            Hi,
            Actually this is an option for advanced users but if you want to know what is the easing function, well let me explain it .
            ” An easing function specifies the speed at which the animation progresses at different points within the animation.”
            And if you want to use this field, there are more functions here ( EASING FUNCTIONS ), just go the address and from example section choose your function and put it into easing field , for instance easeOutSine.

      3. Qusai

        still one more thing,when u click on the navigation bar is not working !!!! 
        also I think it’s better to make tables type general_utf-8 to accept arabic too 
        thanks 

        Reply
        1. Mehrdad FI Post author

          Hi,
          About utf-8, I changed it in database query in newer version 1.3.2 ( soon ) . And about disabling the click event on thumbnail I think the problem comes from one of your script files. ( I think ).

          Reply
  10. John Doe

    Hi, thank’s for this good job, but where i have to put this code “[wp_eis id="1"] [wp_eis id="1"]Slideshow Title[/wp_eis]” and
    “<?php echo do_shortcode('[wp_eis id="1"]'); ?>"

    Reply
    1. Mehrdad FI Post author

      Hi, Mostafa
      Yup why not, but currently I am busy on new version with new features like appending images once time after creating a slideshow and also pro settings system.
      In new version I will put the tutorial in english and persion languages.

      thanks.

      Reply
  13. Ben Woods

    I am in the early stages of re-writing a theme for my site, and I thought using this as part of the header might be an interesting change, but it doesn’t look as though the slideshow elements can be used as links. *sadface*
    For a first version, it’s quite good, keep it up!!!

    Reply
  14. ThatManViv

    Sorry, Mehrdad ….. you might be a clever programming guy but most of us are not … I suspect most people just want sommat the click to install, click to activate, click to set up some easy configurations like size of images, speed of loading and viewing, and to just drag and drop the images in a lump.  Like me, they dont wanna be tampering wtih any coding … respect to you tho for being so smart … and ya charity in passing this out …

    Reply
    1. Mehrdad FI Post author

      Hi, ThatManViv.

      I will publish the new version of the plugin as soon as possible ( maybe two weeks later ) , with a simple and powerful upload system and also with a simple and advance interface for novice and professional users.

      Thanks again for your feedbacks.

      Reply
  15. ThatManViv

    Sorry, unless you are very experienced this is quite ridiculous.  What is  this “easing”, and “easing speed”, and “title speed” and why is there no Help to demonstrate what these terms mean ??  Also, having to include one image at a time seems madness.  Even when it has been added there is nothing advising that it has been added. I do like the thumbnail option tho, thats good.  And I do like the opportunity to state which order any particular image can be set to appear at.  Sorry, I can’t be bothered with it. 

    Reply
    1. Mehrdad FI Post author

      First of all thank you for your feedbacks, and now let me help you . this plugin is based on ajax interaction , and when you add a slideshow in “Add EIS” if it successful you receive a response that show to you the slide show has been added or not and also in “Add Items” section.

      About easing field, well this is a function to use for the transition if you want to know more about easing function you can see this jquery plugin easing that I used it.

      And about including images at a time, well this is a good idea I will use it as new feature in the new version as soon as possible.

      At the end I will add a video tutorial about how use this plugin.

      Thanks Again

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *