Landing Page Details

Latest Version 1.1.0 – 8 October 2018

XPANDA – Responsive Gallery Content Expander Plugin is a jQuery Plugin that enables a user to expand the teaser item or thumbnail image to expand content related to the image. This plugin is built for all sorts of content types such as meet the team pages, image galleries, business services and creative portfolios.

Fluid, Fast and Flexible

The Flexbox CSS property has been incorporated, which enables a more efficient and fluid way of laying out, aligning and distributing space among the items. Flex values of thumbnail images are automatically calculated and applied, keeping the aspect ratios and will never crop the images no matter the dimensions.

Many Customizable Options

Easily adjust the number of items per row for each breakpoint you specify and their vertical and horizontal spacing. Choose if you want to display a Call-To-Action, enable the lazyloader, enable auto-scrolling to the expanded item, and many more.

Cross-browser Responsive Design

XPANDA items adapt to the width of the containing parent element and has been tested on Chrome, Firefox, Safari, Opera, Internet Explorer 11+, Microsoft Edge and various mobile browsers. Even specify your own breakpoints!

Built-in Image Lazyloader

A custom image lazyloader has been built into XPANDA for both the thumbnail and large images and no third-party plugin is needed with the option to switch off.

Beautiful Animations

Slick sliding animations for expanding and collapsing items with smooth scrolling to active items built in.

Multiple Galleries

Add multiple galleries on one page for seperating staff members and portfolio or gallery categories which all behaves independently of each other.

Support and Documentation

6 Months free support via Support Forum when you purchase the plugin. Extensive documentation available for viewing before and after purchase to help you use XPANDA to it’s full potential.

Free Photoshop Action

Included in the download is a free photoshop action used to blur and resize the images to a very low filesize to speed up the page loading time.

11 Pre-Built Examples to Use and Customize

Included are 11 beautifully designed, ready-to-use examples for quick and easy implementation.

Coming Soon

Many more examples and features coming soon.

What people are saying

This is a great script and works great across platforms. Very well written with easy to customize code. Plus it can be used for so many different applications.

I had a question and the developer responded within a few minutes. Great Support!

Excellent plugin with excellent support.

We love your plugin and will most likely purchase more licenses to use on other sites! The flexibility is awesome and it’s pretty easy to understand the documentation and implementation.

I had a couple of questions as I was implementing and the author got back to me right away with quick and straight forward solutions. I have purchased several plugins and Xpanda has been the best from design to code quality and customer support.

 

Changelog

Version 1.1.0 – 8 October 2018

  • [Feature] – Added support for multiple gallery instances
  • [Feature] – Added sliding animation for expanding/collapsing with speed control via options
  • [Feature] – Added scrolling to active item animation with speed control via options
  • [Feature/Bug fix] – Added preloader to stop jumpy loading
  • [Bug fix] – Refactored code to use promises for more precise callbacks

Version 1.0.0 – 5 June 2018

  • Initial Release

 

Please note that the images in the preview, screenshots and examples are NOT included in this download. They can be found at Gratisography and Unsplash.

The fonts used in the examples are Nunito Sans, Open Sans, Amatic SC, and Roboto Slab.

  • TheClick_art

    2018-08-03 11:29:15
    Purchased Reply

    Can you tell me if your plugin has support for data in json format and received via ajax.

  • Eloquent-Design

    2018-08-03 16:55:27
    Purchased Reply

    Hi TheClick_art, Thank you for your interest. As it stands with XPANDA at this point, it does not have ajax and/or json support. This however is in the process of being developed as well as support for filtering by category. To keep posted on the progress consider following me for future updates. You can find the link on https://codecanyon.net/user/eloquent-design.

  • pixel-ink

    2018-10-05 22:56:58
    Purchased Reply

    Hey Ant, we hit a problem where the gallery was somewhere in the middle of the page and on image click, the scrollTo pointed to somewhere on top of the page instead of the thumbnail top. I changed target.position().top to target.offset().top on line 418 to get the actual position of the element to fix it for me. Maybe it helps you. Very nice plugin btw, thanks! (couldn't register on support page - captcha field is missing)

  • Eloquent-Design

    2018-10-06 02:26:36
    Purchased Reply

    Hi pixel-ink. First of all, thank you so much for purchasing xpanda! I had a look at what you said about the scrollTo and can't seem to replicate the issue on my side. I have added some content above and below the gallery and might have found what you mean about not scrolling to the top position of the clicked item. The only reason why the scrollTop would not be exactly the same position as the clicked item is when there is no content below the gallery limiting the amount of scrolling space available below the gallery. It is difficult to say what the issue was with your implementation of xpanda is as I obviously don't have link to your website :) I hope that makes sense? For further reading on position vs offset see the next link which describes it well and why I didn't resolve to using offset https://tinyurl.com/y7o6u59a Let me know if you have any other concerns or queries. Thanks for letting me know about my support forum.. Appreciate it!!

  • leneleeb

    2018-12-10 18:46:21
    Purchased Reply

    Good day, Is it possible to make the image change (ie; image swap) on hover in staff-3?

  • Eloquent-Design

    2018-12-10 22:05:43
    Purchased Reply

    Hi leneleeb, thank you so much for purchasing xpanda!! So, I have played around with the staff 3 example and found you could apply the following changes to make the images swap: 1. Update the x item's a tag to include a background image:

    Wallace Barnett

    ...
    2. Add the following css to your preferred css file:
    .x-initiated .x-item > a:hover img { opacity: 0; }
    
    I hope that helps. Please just keep in mind that the images on hover won't be preloaded and a slight flicker might occur.

  • leneleeb

    2018-12-10 23:47:30
    Purchased Reply

    Works perfectly! Thank you so much!

  • Eloquent-Design

    2018-12-10 23:58:59
    Purchased Reply

    Awesome! Glad I could help!

  • leneleeb

    2018-12-11 02:08:22
    Purchased Reply

    Hi again :) For some reason after uploading to the server, the hover image is semi-transparent: https://leofin.co.za/test/our-team.html Looked fine when test locally! Possible you can provide a little a input as to why it's doing this please?

  • Eloquent-Design

    2018-12-11 17:07:45
    Purchased Reply

    Hi leneleeb, No problem :) The reason why the hover is semi-transparent is because of an "x-is-not-active" class added to all the items when one particular item has been expanded. That is also why I believe you haven't noticed it on your local environment. To fix this add the following css:

    .x-initiated .x-item.x-is-not-active { opacity: 1 }
    

  • leneleeb

    2018-12-11 18:43:42
    Purchased Reply

    Super thank you. All good now :)

  • Eloquent-Design

    2018-12-11 18:45:53
    Purchased Reply

    Pleasure!!

  • bitipajarito

    2018-06-16 02:10:09
    Purchased Reply

    Hi: Could I install this extension on wordpress? Thanks in advance

  • Eloquent-Design

    2018-06-16 03:36:22
    Purchased Reply

    Hi bitipajarito, unfortunately not. A wordpress plugin of xpanda is in the pipeline and will be available in the near future.

  • bitipajarito

    2018-06-16 14:06:25
    Purchased Reply

    Thanks for the answer... How could I be aware when the plugin is available? I am very interested... Thanks again

  • Eloquent-Design

    2018-06-16 15:48:01
    Purchased Reply

    You could potentially subscribe to my RSS feed - feed://codecanyon.net/feeds/users/Eloquent-Design.atom or you could private message me your email address and I will send you the link as soon as it is available. I hope that helps!

  • andru24

    2018-06-05 04:33:20
    Purchased Reply

    Great Work! Good Luck With Selling :)

  • Eloquent-Design

    2018-06-05 04:35:08
    Purchased Reply

    Thanks andru24!

  • dessibob

    2018-06-08 16:59:25
    Purchased Reply

    Hizit, I see on mobile that it changes from 4 columns to two. I specifically need 3 columns on mobile can this be done with some simple CSS?

  • Eloquent-Design

    2018-06-08 17:23:49
    Purchased Reply

    Hi dessibob, It is possible to have your desired amount of items per row for each breakpoint. This is however not a simple css change but can be done via the options. Please see http://xpanda.eloquentdesign.co.za/documentation.html under Options.

  • dessibob

    2018-06-08 17:28:08
    Purchased Reply

    Ty

  • dessibob

    2018-06-08 21:28:36
    Purchased Reply

    Any plans to implement smooth opening animation?

  • Eloquent-Design

    2018-06-08 21:34:53
    Purchased Reply

    There are a few new features in the pipeline as we speak such as, Internet Explorer 10 support, Ajax loading, video embedding and lightbox implementation. Will add the smooth animation to this list. Thank you for the suggestion!

  • dessibob

    2018-06-08 21:44:13
    Purchased Reply

    Thanks. The opening is just a bit abrupt - but otherwise great plugin will purchase soon.

  • Eloquent-Design

    2018-06-08 21:54:19
    Purchased Reply

    Thank you!

  • dessibob

    2018-07-13 17:43:14
    Purchased Reply

    Hi, I've added the scripts and changed images but they don't open like in the demo, could you advise please? https://www.customweb.co.za/demo/xpanda/

  • dessibob

    2018-07-13 17:45:31
    Purchased Reply

    This is what I want to emulate: http://xpanda.eloquentdesign.co.za/examples/gallery-2.html

  • Eloquent-Design

    2018-07-13 18:01:42
    Purchased Reply

    Hi dessibob, I have inspected your site and I suspect it is because you need to initiate the script after the DOM has done loading.

    You are currently initiating xpanda in the <head> tag and you need to put the

    <script>
           $("#xpanda-1").xpanda();
    </script>
    

    just before the closing </body> tag. Let me know if this works.

  • dessibob

    2018-07-13 18:11:02
    Purchased Reply

    Thanks, it does. However opening does not zoom automatically to the content area and controls are not displaying properly.

  • Eloquent-Design

    2018-07-13 19:09:04
    Purchased Reply

    To have the default control images you need to also copy the assets folder into the same directory as where the html document is located. Try adding more items and see if the scrolling works then otherwise let me know and I'll look into what causes this not to function as expected.

  • dessibob

    2018-07-13 19:38:33
    Purchased Reply

    Control images are back ty. Still not zooming to content.

  • Eloquent-Design

    2018-07-13 20:37:12
    Purchased Reply

    Still looking into why the "zooming" not working. There are a lot of html elements with fixed and absolute positioning and could potentially be the problem. I will get back to you as soon as I can replicate the issue (and try and fix it) on my side.

  • dessibob

    2018-07-13 20:47:05
    Purchased Reply

    Thank you for your assistance.

  • Eloquent-Design

    2018-07-14 06:06:09
    Purchased Reply

    Hi dessibob, I have spent quite an excessive amount of time trying to figure out why your implementation of xpanda is not working as expected but I couldn't get to the root of the problem. I have however made a copy of your site on my local and removed all your css files and got it to work. I can't give you clear indication of what line of your css causes the problem but what I do know is how to get the scrolling to work. Please follow the below instructions and see if it then works:

    1. Add at least 80 x-items
    2. Comment out all of your css
    3. Refresh your browser (autoscrolling to active item should now work)
    4. Add back your css line by line until the scrolling doesn't work anymore
    I really hope this will be a start to fixing your implementation. I am 100% sure it something in your css breaking the functionality of the auto-scrolling. Let me know if you get it to work and please consider giving xpanda a review based on the quailty of the support you have received. To give a review go to https://codecanyon.net/item/xpanda-responsive-gallery-content-expander-plugin/reviews/22029879. Thanks a million!

  • dessibob

    2018-08-19 00:09:00
    Purchased Reply

    Hi, I appreciate your efforts :) Unfortunately it has taken months to get that solution looking and working like it is - so the css cannot be removed or edited for the sake of one plugin. Is there anything else we can try otherwise I need to utilise another plugin.

  • dessibob

    2018-08-19 00:10:43
    Purchased Reply

    I don't see how it can conflict unless it's duplicating class names of another plugin?

  • Eloquent-Design

    2018-08-19 17:00:31
    Purchased Reply

    Hi dessibob, I believe your usage of xpanda is quite a unique case due to the fact that you need xpanda implemented within wrappers that has positioning assigned to them. The scrolling (or what you refer to as zooming) function is built to work with the window top scroll position and in your case we need to look at scrolling within another element. This will require some custom coding. I would love to help you fix this issue. I am sending you a private message to see if we can come up with a custom solution.

  • bobo07

    2018-06-13 20:23:37
    Purchased Reply

    Great work! I need little help. I want gallery-1 to look like in greyscale, but on hover to be colored. How can it be done?

  • Eloquent-Design

    2018-06-13 21:17:58
    Purchased Reply

    Thank you for purchasing Slobodan. You could add the following lines at the end of the xpanda.gallery1.css file:

    .x-initiated .x-item > a {
        -webkit-filter: grayscale(100%);
        filter:url("data:image/svg+xml;utf8,#gray");
        filter:grayscale(100%);
    }
    
    /* - Item - Hover - */
    @media (min-width: 769px) {
        .x-initiated .x-item:hover > a {
            -webkit-filter: none;
            filter: none;
        }
    }
    
    Make sure to not add this to the img tag as this will make the image jumpy on hover.

  • bobo07

    2018-06-13 21:22:25
    Purchased Reply

    That's working very well. Thank you for support!

  • Eloquent-Design

    2018-06-13 21:23:43
    Purchased Reply

    Perfect, glad I could help!