fabiorino / crelly-slider

A free responsive slider for WordPress that supports layers. Add texts, images, videos and beautify them with transitions and animations.
MIT License
104 stars 36 forks source link

send user to URL on click #18

Closed wallyfaye closed 7 years ago

wallyfaye commented 8 years ago

Would it be possible to add an option to send a user to a URL when the user clicks on the image?

On a site using this plugin, I've injected code using the below modifications. The problem is this is computationally expensive since it is looping thru the DOM and it also relies on using the text link option in the backend to set a URL on top of blank text.

beforeStart : function() {bind_crelly_slide_events()},
beforeSetResponsive : function() {},
beforeSlideStart : function() {},
beforePause: function() {},
beforeResume : function() {},

function bind_crelly_slide_events(){
    var $ = jQuery;

    $('#crellyslider-1').find('.cs-slides li').off('click.crelly_link')
    $('#crellyslider-1').find('.cs-slides li').on('click.crelly_link', function (argument) {
        var this_slide_object = return_current_slide();
        var this_crelly_slide_link = this_slide_object.find("a").attr("href");

        window.open(this_crelly_slide_link, "_self")

    });

    function return_current_slide () {
        var crelly_index_tracker;
        $(".cs-navigation").find(".cs-slide-link").each(function(index, element){
            if($(this).hasClass("cs-active")){
                crelly_index_tracker = index;
            }
        });
        var this_crelly_slide = $(".crellyslider").children("ul").children("li").eq(crelly_index_tracker);
        return this_crelly_slide;
    }

}
fabiorino commented 8 years ago

Not possible for now, but there is a lighter workaround that works without javascript: create a text element and do not write anything as text. Write the link you want to open in the "Link" textbox and check "Open in a new tab". Then, in custom CSS, set: padding-left: your_start_width px; pading-top: your_start_height px;