CODEWITHSUNDEEP
phpjqueryimagefancybox
Daniel
Daniel

Reputation: 113

Automatically add fancybox class to image links

I'm using the Pulse CMS for designing a simple static website that needs to be editable. I'm using FancyBox for image highlighting and enhancing.

What I want is for all the images to automatically be associated with FancyBox without having to add the code manually.

Basically something like this

<img src="image.jpg">

should become

<a class="fancybox" href="image.jpg"><img src="image.jpg"></a>

I hope it's clear what I'm aiming for. I fiddled around using jQuery and PHP, but couldn't really figure it out. I don't even know if this is possible, maybe if not there are alternatives.

In response to JFK suggestion -- please tell what I'm doing wrong here:

<html>
    <head>
        <link rel="stylesheet" href="includes/jquery.fancybox.css" type="text/css" media="screen"/>     
        <script type="text/javascript" src="includes/jquery-1.9.1.min.js" type="text/javascript"></script>  
        <script type="text/javascript" src="includes/jquery.fancybox.js" type="text/javascript"></script>       
        <script type="text/javascript">
            $("img").on("click", function(){
                $.fancybox($(this).attr("src"),{
                    // API options
                    padding : 0 // example
                });
            });
        </script>
    </head>

    <body>

        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt=""/>

    </body>
</html>

Upvotes: 1

Views: 3224

Answers (5)

JFK
JFK

Reputation: 41143

If what you want is all the images to automatically be associated with FancyBox, then maybe you don't even need to wrap - .wrap() - them with an anchor. A different approach would be to link them directly to fancybox on click like : 

$("img").on("click", function(){
    $.fancybox($(this).attr("src"),{
        // API options
        padding : 0 // example
    });
});

In this way, you don't process anything until the actual image is clicked. This would be better in terms of performance (consider 100+ images being wrapped every page load)

See JSFIDDLE

NOTE : .on() requires jQuery v1.7+

EDIT :

Umair Abid's comment about specificity is worth to consider because you may not like to open in fancybox ALL your page's images (which it would include your logo.) It would be a better idea to target those images in your specific content container so this line

$("img").on("click", function(){

... would work better like

$("#contentContainer img").on("click", function(){

Upvotes: 1

hatkirby
hatkirby

Reputation: 850

$("img").wrap(function() {
    return '<a class="fancybox" href="' + $(this).attr("src") + '"/>';
});

This should work.

EDIT: whoa typos out the wazoo

Upvotes: 0

Guilherme Reda
Guilherme Reda

Reputation: 115

Use 

$("img").wrap(function() {
  return "<a class='fancybox' href='" + $(this).attr("src") + "' />";
});

Upvotes: 0

Umair Abid
Umair Abid

Reputation: 1463

I guess it is possible through jquery. First you need to give class on img tags which you want to convert into fancybox url, than use the following jquery code

$('img.attach_fancybox').each(function(){
    var src = $(this).attr('src');
    $(this).after('<a class="fancybox" href="'+src+'"><img src="'+src+'"></a>');
    $(this).hide();
})

I haven't tested the code so let me know if it doesn't work

Upvotes: 0

Naftali
Naftali

Reputation: 146300

Use jQuery's .wrap() function to wrap all of the images in the page with an anchor tag pointing to the image location

Upvotes: 0

Related Questions