Git Product home page Git Product logo

foogallery-owl-carousel-template's Introduction

Owl Carousel for FooGallery

A custom template for FooGallery which implements Owl Carousel 2.

###Current Version = 1.0.2

This repository will most often be one step ahead of the WordPress Repo. Development happens here, so if you'd like to see what's coming down the pipe, feel free to download and experiment with this. Issues and Pull requests welcome!

##Useful Resources

##Screenshots Choose Owl Carousel from the "Gallery Template" field in FooGallery

FooGallery Owl Carousel Template

Custom settings for each Owl Carousel that control items per "stage", margin between items, navigation, pagination and more.

Custom settings for each Owl Carousel that control items per "stage", margin between items, navigation, pagination and more.

Have multiple types, shapes, sizes and functionalities for multiple galleries on the same page.

Have multiple types, shapes, sizes and functionalities for multiple galleries on the same page.

Choose a custom link and target to launch from each image in your Carousel. Combined with FooBox Pro you can launch videos, forms, a Google Map, and more from each individual image in your Carousel.

Choose a custom link and target to launch from each image in your Carousel. Combined with FooBox Pro you can launch videos, forms, a Google Map, and more from each individual image in your Carousel.

Choose from a plethora of styles and hover effects. See a preview live while you create your gallery.

Choose from a plethora of styles and hover effects. See a preview live while you create your gallery.

##FAQs Can I set a different number of images for different size screens?

Yes. This feature was added into version 1.2. Enable the "Advanced Options" section to set those options.

I don't see Owl Carousel as an option in the Gallery Templates field when I go to add a new Gallery

Make sure you go to "FooGallery > Extensions" and make sure you see "Owl Carousel" activated there.

Can I update the text for the "prev" and "next" buttons?

Yes, since version 1.2.3 you can now use a simple filter to change the text of those buttons. Here's some sample code that you can add into your theme's function.php file to customize that text.

Update the "prev" text `add_filter('owl_prev_text','new_prev_text');

function new_prev_text() { return 'Go to the previous slide'; }`

Update the "next" text `add_filter('owl_next_text','new_next_text');

function new_next_text() { return 'Go to the next slide'; }`

You can also return simple HTML. This allows you to swap out the text with font icons instead. For example, Twentyfifteen preloads the Genericons font-icons on the front end for you. So you could swap out the text with a right and left button. In that case, your code would look like this:

Use a Genericon Left Arrow for "prev"

add_filter('owl_prev_text','new_prev_text');

function new_prev_text() {
	return '<span class="genericon genericon-leftarrow"></span>';
}

Use a Genericon Right Arrow for "next"

add_filter('owl_next_text','new_next_text');

function new_next_text() {
	return '<span class="genericon genericon-rightarrow"></span>';
}

Can I use initialization rules from the original Owl Carousel?

Yes! Since version 1.4 there's now a filter you can use to add additional Owl init rules. Here's some examples:

add_filter('foogallery_owl_custom_init', 'my_custom_init', 10, 2);

function my_custom_init($custom_init, $gallid) {
    $custom_init = "startPosition: 'URLHash',";
    return $custom_init;
}

Just remember to always end the line with a comma, and understand that doing this wrong can definitely break your galleries.

You can also target per gallery like so:

add_filter('foogallery_owl_custom_init', 'my_custom_init', 10, 2);

function my_custom_init($custom_init, $gallid) {
    if ( "5" != $gallid ) {
            return null;
    } else {
        $custom_init = "startPosition: 'URLHash',";
        return $custom_init;
    }
}

What other filters are available?

Since version 1.4 there now the following filters available as well:

  • foogallery_owl_lazyload -- to override the default laszyLoad : true, just return this false instead.
  • foogallery_owl_startposition -- this is used in comination with the Deep Linking feature. You can choose to change the first slide to whatever you like here.

How do you do it, Matt!? How do you make such awesome stuff!?

Awww shucks! I lean on tons of other stronger, smarter, more skilled people than me and work at it every day. If you really appreciate this plugin, then please feel free to send me a tip over here.

foogallery-owl-carousel-template's People

Contributors

mathetos avatar bradvin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.