Anchor tag in H3 Title when Pop-Up showing

[muslimakhan]

Hello Sir, This plugins is wonderful at all. I choose it but i have faced big problem when i implementing this in my project. Please provide me healthy advice. Can you provide some more details regarding options of this widget, i can't able to custom template on it. Can i add anchor tag with an url in H3 with title when we open image on popup pictures slider. Please provide us more detail for this widget.

[tonydspaniard]

Hi @MuslimAKhan

First of all, thank you for your kind words. About modifying the template, The plugin docs is very specific: https://github.com/blueimp/Gallery/blob/master/README.md#carousel-setup

The template is provided as described on their docs and there is no much we can do. The only thing we can is using the multiple options that the plugin have. If you wish to modify its behavior I fear you will have to do it throughout the manual installation of the plugin.

BUT, you could get a reference of the H3 like this:

var $h3 = $('.blueimp-gallery .slides  h3'); 

That means that you could easily provide the same effect as with an anchor. On another note, I have never done the following:

<?php $items = [
    [
        'title' => '<a href="#">TITLE WITH ANCHOR</a>',
        'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_s.jpg',
        'options' => array('title' => 'Camposanto monumentale (inside)')
    ],
];

Maybe you can try and tell us if it works for you.

[muslimakhan]

Respected @tonydspaniard Sir, Thanks for your comment, i reached on docs plugin but i can't found any information regarding to my fullfilment in js also, and i have used this above comment code but it's not working:

<?php
$items = [
    [
        'title' => '<a href="#">TITLE WITH ANCHOR</a>',
        'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_s.jpg',
        'options' => array('title' => 'Camposanto monumentale (inside)')
    ],
];

:relaxed: at the end i have found solution of this issue, i have created this below code with your plugin then i have solved my problem, check it:

$items = [
    'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
    'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
    'options' => [
        'title' => 'muslim-khan-1',
        'datahref' => '/starmakers/nominee/1.html',
        'class' => 'gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter actor',
        'img-class' => 'img-responsive',
        'data-index' => '16',
    ],
];

this above code is written in my $items variable and jQuery script is wriiten as below:

jQuery(function () {

    jQuery(document).find(".play-pause").remove();
    jQuery(document).find(".gallery-item").each(function () {
        var img_class = jQuery(this).attr("img-class");
        jQuery(this).children("img").addClass(img_class);
    });
    jQuery(document).on("click", ".gallery-item", function () {

        var title = jQuery(this).attr("title"),
                link = jQuery(this).attr("datahref");
        setTimeout(function () {
            jQuery("#blueimp-gallery").find(".title")
             .html("<a style='color:#fff' href='" + link 
               + "' target='_blank' data-pjax='0'>" + title 
                        + "</a>");
        }, 200);
    });
    jQuery(document).on("click", ".indicator li", function () {

        var title = jQuery(this).attr("title"),
                link = "";
        jQuery(document).find(".gallery-item").each(function () {
            if (jQuery(this).attr("title") == title)
                link = jQuery(this).attr("datahref");
        });
        setTimeout(function () {
            jQuery("#blueimp-gallery").find(".title")
                           .html("<a style='color:#fff' href='" + link 
                          + "' target='_blank' data-pjax='0'>" + title 
                               + "</a>");
        }, 200);
    });
    jQuery(document).on("click", ".next,.prev", function () {

        var title = "",
                link = "";
        jQuery(document).find(".indicator li").each(function () {
            if (jQuery(this).hasClass("active"))
                title = jQuery(this).attr("title");
        });
        jQuery(document).find(".gallery-item").each(function () {
            if (jQuery(this).attr("title") == title)
                link = jQuery(this).attr("datahref");
        });
        setTimeout(function () {
            jQuery("#blueimp-gallery").find(".title")
                             .html("<a style='color:#fff' href='" + link + 
                          "' target='_blank' data-pjax='0'>" + title 
                                 + "</a>");
        }, 200);
    });

});

Please check it for @demo :blush: :partly_sunny:

[tonydspaniard]

@MuslimAKhan Fantastic! So happy you have found a solution! Please, allow me to give you a small hint so to make your code a bit more readable use modules:

(function($, undefined) {
    // private methods

    $(document).find(".play-pause").remove();
    $(document).find(".gallery-item").each(function () {
        var $self = $(this);
        $self.children("img").addClass($self.attr("img-class"));
    });

    $(document)
          .on("click", ".gallery-item", function () {
                 var title = $(this).attr("title"),
                       link = $(this).attr("datahref");

                 setTimeout(function () {
                         var html = "<a style='color:#fff' href='" 
                            + link 
                            + "' target='_blank' data-pjax='0'>" 
                            + title 
                            + "</a>";
                 $("#blueimp-gallery")
                            .find(".title")
                            .html(html);
                  }, 200);
           })
            .on("click", ".indicator li", function () {
                   var title = $(this).attr("title"),
                         link = "";
                  $(document).find(".gallery-item").each(function () {
                        if ($(this).attr("title") == title) {
                              link = $(this).attr("datahref"); // is each, you want to keep looping after set?
                        }
                  });
                  setTimeout(function () {
                            $("#blueimp-gallery")
                            .find(".title")
                            .html("<a style='color:#fff' href='" 
                                 + link 
                                 + "' target='_blank' data-pjax='0'>" 
                                 + title 
                                 + "</a>");
                  }, 200);
             })
             .(document).on("click", ".next,.prev", function () {
                   // ... You got the idea ;)
              });
})(jQuery); 

Here is an excellent source for Javascript patterns: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Congratulations again!