Clever Geek Handbook

Fancybox link in link tag

On my website, users can view favorite images (user hover over image, view favorite images). My current code (in a foreach loop):

    <a class="fancybox" title="Titel {{ $afbeelding }}" rel="group" href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </a>

As you can see, the tag is <a>

in the tag <a>

, and what happens is fancybox adds all internal tags <a>

as an image to the fancybox gallery. So if I click on an image, the gallery is 3. What can I do to keep the tags like this but avoid the same image 3 times in the same gallery.

edit : the tags work great, they link to the correct action, the only problem is all the images appear 3 times in the fancybox gallery.

+3


source to share


3 answers


Since nested tags <a>

inside another tag <a>

lead to a nearly impossible solution, as a workaround, you can use another element (as suggested by MauricioCarnieletto ) to wrap your nested tags <a>

.

Then bind this wrapper element ( class="fancybox"

) to the fancybox BUT using the fancybox special attributes data

:

  • data-fancybox-href

  • data-fancybox-title

  • data-fancybox-group

Like:

<div class="fancybox" data-fancybox-title="Titel {{ $afbeelding }}" data-fancybox-group="group" data-fancybox-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
    <div class="favorieten-hover-box">
        <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}" alt="" />  
        <div>
            <span>                               
                <a href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                <a href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
            </span>
        </div>
    </div>
</div>

Then your script can be as simple as:

$(".fancybox").fancybox();

See JSFIDDLE

Notice I've removed the attributes rel="group"

from the nested links as you don't need them unless you are using them for purposes other than fancybox.



EDIT : Since you have nested links inside a wrapper, you might want them to have a split action without fancybox running, and also show them on hover

, as you previously pointed out in one of your comments like so

first you may need to customize your css like

.fancybox:hover .fa {
    display: block;
    /* other css properties */
}

notice I am targeting a class .fa

that is common to both nested links.

Then customize your fancybox init code like

$(".fancybox").on("click", ".fa", function (e) {
    e.stopPropagation(); // don't fire fancybox
}).fancybox();

We used the notification.stopPropagation()

to prevent the selector .fa

from starting fancybox, but still do our default.

See updated JSFIDDLE

+4


source


Per W3C specs: Sub-links are illegal .

Links and bindings defined by the A element must not be nested; The A element must not contain any other A.

Since the DTD defines a LINK element as empty, LINK elements may not be nested.



So there is no correct way to "fix" your substandard problem, rather than putting anchor labels in other anchor tags - that doesn't make sense and won't play well when reopening. You need to figure out how to structure your HTML differently to conform to the standards for the elements you use.

+1


source


As Shanli said, you cannot nest two links, but you can solve it with js and change the element.

Change your HTML to this:

<span class="callthisanewclass" title="Titel {{ $afbeelding }}" rel="group" data-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </span>

Then add this to your JS (in this case JQuery)

$('.callthisanewclass').on('click', function () {

    var ths = $(this),
        href = ths.data('href');

    ths.fancybox({

       href: href

    });

}
+1


source






More articles:


All Articles