CODEWITHSUNDEEP
javascriptjqueryimage-gallery
user3353167
user3353167

Reputation: 892

make a image preview onclick and put prev next

I'm using this code inside my website, I am struggling though to make it work on click, instead of when the cursor pass on the image this is the java script I'm using: 

$(document).ready(function(){

  imagePreview();

});


$("a.preview").hover(function(e){

    this.t = this.title;

    this.title = "";

       var c = (this.t != "") ? "<br/>" + this.t : "";

     $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");

     $("#preview")

        .css("top",(e.pageY - xOffset) + "px")

        .css("left",(e.pageX + yOffset) + "px")

        .fadeIn("slow");

},


function(){

    this.title = this.t;

    $("#preview").remove();

});

$("a.preview").click(function(e){

    $("#preview")

        .css("top",(e.pageY - xOffset) + "px")

        .css("left",(e.pageX + yOffset) + "px");

});

// Configuration of the x and y offsets

this.imagePreview = function(){

        xOffset = -20;

        yOffset = 40;
};

this is how I'm inserting the preview pictures to the gallery :

<a href="images/gallery/Dolmen di Avola.JPG" class="preview" title="Dolmen di Avola"><img src="images/gallery/Dolmen di Avola.JPG" alt="photo" /></a>

could you please help me with this problem? also how can I insert prev and next into the preview image? thanks in advance

Upvotes: 0

Views: 4853

Answers (1)

DennyHiu
DennyHiu

Reputation: 6060

Still don't understand what your problem is. But if you want to accomplish picture viewer with this

<a href="images/gallery/Dolmen di Avola.JPG" class="preview" title="Dolmen di Avola">
    <img src="images/gallery/Dolmen di Avola.JPG" alt="photo" />
</a>

then the code would looks like this :

$(document).ready(function(){
     var $preview = $("<p id='preview'><img src='' alt='Image preview' /><span></span></p>");
     $("body").append($preview);
     $preview.hide();
});

$("body").click(function(e){
   var isImgClicked = $(e.target).is("img")

   // if there is click event outside IMG then close the #preview box
   if(!isImgClicked)
      $("#preview").fadeOut();
   });

$("a.preview").click(function(e){
   // prevent default click behaviour
   e.preventDefault();

   // get variables
   var title = $(this).attr("title");
   var href = $(this).attr('href')
   var c = (title != "") ? "<br/>" + title : "";
   var status = $("#preview").data("visible");

   // set its location and do show
   $("#preview").css("top",(e.pageY) + "px").css("left",(e.pageX) + "px")
   $("#preview").fadeIn();

   // set #preview content
   $("#preview span").text(title);
   $("#preview img").attr('src', href);

});

Here's the demo link as the proof JSFIDDLE DEMO

Upvotes: 1

Related Questions