snippetjavascriptMinor

Single button use to create light box that brings up different content based on the div

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

thecreatebringsdivlightdifferentsinglethatbuttonbased

Problem

My goal is: when you click on the button "word" it will turn into a lightbox. The button will bring up another content box that holds the same profile image as before with a small bio with image thumbnails below on what they worked on.

I was able to get everything working for the first button, but I found that if I keep doing it this way, I will have to rewrite the code over and over for each profile. Is there a way I could rewrite my code so once you click on the button the correct content will come up based on the div that you are in?

/
   ARTIST PAGE
/

/profile/

.profile img {
  height: 300px;
  width: 400px;
  margin-top: 15%;
}
.artistHeader {
  /color: black;/
  margin-top: 7%;
}
.longName {
  font-size: 20px;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://lokeshdhakar.com/projects/lightbox/overlay.png) repeat;
  text-align: center;
}
#lightbox img {
  box-shadow: 0 0 25px #111;
  -webkit-box-shadow: 0 0 25px #111;
  -moz-box-shadow: 0 0 25px #111;
  max-width: 940px;
}

`

Meet the artist

Prof. Yreina D. Cervantez

Words Button

Prof. Ken Jones

Words Button

Sandy Hernandez Martinez

Words Button

Valerie Sharp

Words Button

Omar Cruz

Words But

Solution

-
Remove the id's from your buttons and move relevant data to attributes. (Personal preference, but reflected later)


  
    
    
      Prof. Yreina D. Cervantez
      Words  Button

-
Apply to all relevant buttons by class (might want new class instead of using btn-primary as I have done)

-
fetch artist-specific data from attribute


  $(document).ready(function() {
    $('.btn-primary').click(function() {
      $.colorbox({
        href: "/artists/"+$(this).attr("data-artist"),
        opacity: 0.5
      });
    });
  });

Code Snippets

<div class="col-md-4">
  <div class="thumbnail">
    <img class='img-responsive' src="https://c1.staticflickr.com/7/6048/6324416396_5f48f83e7f_b.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
    <div class="caption">
      <h3>Prof. Yreina D. Cervantez</h3>
      <p><a href="javascript:void(0);" class="btn btn-primary" role="button" data-artist="cervantez">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
      </p>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('.btn-primary').click(function() {
      $.colorbox({
        href: "/artists/"+$(this).attr("data-artist"),
        opacity: 0.5
      });
    });
  });
</script>

Context

StackExchange Code Review Q#95402, answer score: 2

Revisions (0)

No revisions yet.