Grouping Fancybox image

Question

I am working out with the fancybox function. it work fine, but it doesnt grouping up based on my Rel.

here is the javascipt

<script type="text/javascript">
    $(function($){
        var addToAll = false;
        var gallery = true;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)

        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>

HTML

<img class="fancybox" title="Bed" rel="1roomGD" src="images_1"  alt="Bed" />
<img class="fancybox" title="K" rel="1roomGD" src="images_2" alt="K" />
<img class="fancybox" title="G" rel="2roomS" src="images_3" alt="G" />

You shouldn't bind fancybox to the `` but the `` tag. You could also check this http://stackoverflow.com/a/9487189/1055987 for reference — JFK, Sep 11 '16 at 00:03

score 0 · Answer 1 · answered Sep 13 '16 at 01:57

as suggested by @JFK, i found out less code modify solution is adding .attr('rel') to grab the value from img

<script type="text/javascript">
    $(function($){
        var addToAll = false;
        var gallery = true;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var rel = $this.attr('rel')
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title).attr('rel',rel);
            $this.wrap(a);
        });
        if (gallery)

        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>

For less clutter inside `each()` check http://jsfiddle.net/p9ubpo5t/ ;) — JFK, Sep 18 '16 at 05:33

Grouping Fancybox image

1 Answers1