CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kjehfiuh
kjehfiuh

Reputation: 145

pop up window with info when image is clicked

Basically I have 4 images and when I click on one, information about that image should pop up with info about it.

How could I achieve that with jquery? Do I use jQuery for it?

Could someone direct me with some examples I could follow?

Thanks all

Upvotes: 0

Views: 784

Answers (4)

Daria M
Daria M

Reputation: 222

You can do it on hover too 

$(document).ready(function() {
  $('#box1').hover(function() {
    $('#info1').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info1').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box2').hover(function() {
    $('#info2').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info2').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box3').hover(function() {
    $('#info3').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info3').stop().animate({
      opacity: 0
    }, 300);

  });
  $('#box4').hover(function() {
    $('#info4').stop().animate({
      opacity: 0.8
    }, 300)
  }, function() {
    $('#info4').stop().animate({
      opacity: 0
    }, 300);

  });
});
	#box1 {
	  width: 150px;
	  height: 150px;
	  background: blue;
	}
	#box2 {
	  width: 150px;
	  height: 150px;
	  background: red;
	}
	#box3 {
	  width: 150px;
	  height: 150px;
	  background: green;
	}
	#box4 {
	  width: 150px;
	  height: 150px;
	  background: orange;
	}
	#info1 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info2 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info3 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	#info4 {
	  opacity: 0;
	  width: 200px;
	  height: 100px;
	  background: #fff;
	}
	
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script type='text/javascript' src='script.js'></script>
</head>

<body>
  <div id="box1">
    <div id="info1">
      <p>
        <ul>
          <li>cool info</li>
          <li>even cooler info</li>
          <li>too cool for school info</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box2">
    <div id="info2">
      <p>
        <ul>
          <li>balblabala</li>
          <li>this is interesting</li>
          <li>of course it is</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box3">
    <div id="info3">
      <p>
        <ul>
          <li>hello world</li>
          <li>I came to rule the planet</li>
          <li>just kidding</li>
        </ul>
      </p>
    </div>

  </div>
  <div id="box4">
    <div id="info4">
      <p>
        <ul>
          <li>no one will read this anyway</li>
          <li>this is not fun anymore</li>
          <li>finally</li>
        </ul>
      </p>
    </div>

  </div>
</body>

And of couse with help of css you can position and format the info containers the way you want.

Upvotes: 0

Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

I've created a JSFiddle

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#popup').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#popup'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

Please have a look, this will help you.

Upvotes: 0

VGD
VGD

Reputation: 466

Seems like you're looking for something like fancybox. Its quite easy to use. Just browse through the link I provided, in my opinion the examples are quite straight forward. There is also a release based on jQuery.

Upvotes: 0

Hearner
Hearner

Reputation: 2729

What you want is a popup when clicking ? See how to use JQuery with the click event, that's it. Something like 

$( "#IdPicture" ).click(function() {
  alert( "Here are the different information about the picture" );
});

You can also add an onClick event to the picture using JS.

You can also use CSS using #IdPicture:active

You choose

Upvotes: 2

Related Questions