Linking javaScript code to CSS using a class?

Question

I'm trying to set up a photography website where when a user clicks on a photo they see the full size image. How would I link the CSS to the JavaScript? I cannot change the formatting of the original image. My thought would be to create a class in the JavaScript, but I'm not sure how to do that.

Please help! Thank you!

jQuery(function($) {
  $('.image1').click(function() {
    var img= $(this).attr("src");
    var appear_image = "<div id='appear_image_div' onclick='closeImage()'></div>";
    appear_image = appear_image.concat("<img id='appear_image' src='"+img+"'/>");
    appear_image = appear_image.concat("<img id='close_image' onClick='closeImage()' src='close.png'/>");
    $('body').append(appear_image);

  });
});

function closeImage () {
  $('#appear_image_div').remove();
  $('#appear_image').remove();
  $('close_image').remove ();
}

imagefull {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

<div class="item"><p class="gallerycaption">Venice, Italy<br />July 2017</p>
      <img src="media\photos_2\portraits\thumbnails\t_italy_1.jpg" alt="Venice, Italy, July 2017" class="image1"/></div>

What I'm trying to do

`How would I link the CSS to the JavaScript?` ?? ... `My thought would be to create a class in the JavaScript` ?? — Temani Afif, Apr 01 '18 at 09:13
what u want is called 'ModalBox' or 'popup'. here. https://www.w3schools.com/howto/howto_js_lightbox.asp — nullqube, Apr 01 '18 at 09:24

Ori Drori · Accepted Answer · 2018-04-01T09:43:29.083

This is a simple demo, based on your code, of an overlay that opens when the image is clicked, and closes on click.

It uses event delegation (.on()) to identify all links of an .image item inside a container (.images). It opens an overlay, and uses .one() to attach a one time event handler for closing the modal.

I also use a flag (modalOpen) to prevent opening more than one model, when an image is clicked.

jQuery(function($) {
  var modalOpen = false;

  $('.images').on('click', '.image', function() {
    var $this = $(this);

    if (modalOpen) return;

    modalOpen = true;

    var img = $(this).attr("src");
    var appear_image = $("<div id='appear_image_div' class='imagefull'></div>");
    appear_image.append("<img id='appear_image' src='" + img + "'/>");
    appear_image.append("<img id='close_image' src='close.png'/>");
    $('body').append(appear_image);

    $('#appear_image_div').click(function() {
      modalOpen = false;

      $(this).remove();
    });
  });

});

.imagefull {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.item {
  display: inline-block;
  width: 25%;
}

.image {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <div class="item">
    <p class="gallerycaption">Venice, Italy<br />July 2017</p>
    <img src="http://lorempixel.com/400/200/" alt="Venice, Italy, July 2017" class="image" />
  </div>
  
  <div class="item">
    <p class="gallerycaption">Venice, Italy<br />July 2017</p>
    <img src="http://lorempixel.com/400/201/" alt="Venice, Italy, July 2017" class="image" />
  </div>
</div>

score 0 · Answer 2 · answered Apr 01 '18 at 09:33

0

If you trying to build a real-time website, I suggest you to use something like this, No need to reinvent the wheel, there are plenty of the jquery plugins available for free and they look stunning too.

answered Apr 01 '18 at 09:33

Ganesh Pilli

136
1
12

thanks, this is for a school project where we're not supposed to use said plugins. Those resources are awesome nevertheless! – Louis L. Apr 01 '18 at 11:25

score 0 · Answer 3 · answered Apr 01 '18 at 09:43

You can find a class creation code sample in this question: How to dynamically create CSS class in JavaScript and apply?

But other ways would be to use the :active CSS pseudo class, or an onclick HTML event, examples:

:active:

:active { *link to image file*; }

onclick:

*image_element*.onclick = function-for-image-view;

If you'd like to see other manipulation techniques, look at this page.

Linking javaScript code to CSS using a class?

3 Answers3