3
\$\begingroup\$

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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php defined( 'BASEPATH') OR exit( 'No direct script access allowed'); ?>



<div class="container">
  <div class=" artistHeader page-header">
    <h1>Meet the artist</h1>
  </div>
</div>


<!-- PROFILE -->
<!-- <div class="profile"> -->
<div class="panel panel-default profile">
  <div class="panel-body">



    <div class="container ">
      <div class="row">

        <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" id="cervantez">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>



        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Prof. Ken Jones</h3>
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Sandy Hernandez Martinez</h3>
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="img/val.jpg" alt="Valerie Head Shot" class="img-rounded"></img>
            <div class="caption">
              <h3>Valerie Sharp</h3>
              <!-- <p>Physhology major with a minor in art. Educational goals are to become an art therpest.</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- </div> -->


        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="../../img/muralp3.png" alt="..." class="img-rounded"></img>
            <div class="caption">
              <h3>Omar Cruz</h3>
              <!-- <p>...</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- <div class="container"> -->
        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="../../img/muralp4.jpg" alt="..."></img>
            <div class="caption">
              <h3>Martha Martinez</h3>
              <!-- <p>...</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>
        <!-- </div> -->

        <!-- <div class="row"> -->
        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://upload.wikimedia.org/wikipedia/commons/4/4c/TRIO_Upward_Bound.jpg" alt="..."></img>
            <div class="caption">
              <h3>Cynthia Menjivar</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://static.messynessychic.com/wp-content/uploads/2014/09/bettiebangs.jpg" alt="..."></img>
            <div class="caption">
              <h3>Yecenia Gutierrez</h3>
              <!-- <p>.1..</p> -->
              <p><a id="yecenia" href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWB1jOjF6DfTXhbSJNDK7wMGeTmIBQGGQFkQBe-UONprXEB3jl" alt="..."></img>
            <div class="caption">
              <h3>Myisha Arellanus </h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.clipartsegifs.com.br/cliparts/cartoon/dexter/dexter_001.gif" alt="..."></img>
            <div class="caption">
              <h3>Jessica </h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="https://s-media-cache-ak0.pinimg.com/736x/fb/76/86/fb76861d4f17ebdae455576fb0718c57.jpg" alt="..."></img>
            <div class="caption">
              <h3>Mario</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.harleysvillebooks.com/files/harleysville/madeline.jpg" alt="..."></img>
            <div class="caption">
              <h3>Christine Cucchiaro</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>


        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://static.timetobreak.com/wp-content/uploads/2015/03/tl-logo-new.jpg" alt="..."></img>
            <div class="caption">
              <h3>Sandra</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://vignette2.wikia.nocookie.net/sailormoonenglishanime/images/3/33/Sailor_Mars_(Fireball_Charge).png/revision/latest?cb=20140301040024" alt="..."></img>
            <div class="caption">
              <h3>Carolina Alcala</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Raymundo M. Hernandez-Lopez</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <!--       <div class="col-md-4">
    <div class="thumbnail">
      <img class='img-responsive' src="http://vignette2.wikia.nocookie.net/sailormoonenglishanime/images/3/33/Sailor_Mars_(Fireball_Charge).png/revision/latest?cb=20140301040024" alt="..."></img>
      <div class="caption">
        <h3>Prof. Ken Jones</h3>
        <! <p>.1..</p>
        <p><a href="#overlay" class="btn btn-primary" role="button">Words</a> <a href="#overlay" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div> -->

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Juan M. Nieto Lopez</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3 class="longName">Mei Wah Lois Koa Morimoto</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Antonio Velis</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Raudel de La Riva</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Gia De La Riva</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Monica Valenzuela</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <img class='img-responsive' src="http://www.translationwebshop.com/wp-content/themes/translationwebshop/images/img_placeholder_avatar.jpg" alt="..."></img>
            <div class="caption">
              <h3>Toney Valle</h3>
              <!-- <p>.1..</p> -->
              <p><a href="#overlay" class="btn btn-primary" role="button">Words</a>  <a href="#overlay" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>



      </div>
    </div>
  </div>
</div>
</div>
</div>

<script>
  $(document).ready(function() {
    $('#cervantez').click(function() {
      $.colorbox({
        href: "/artists/cervantez",
        opacity: 0.5
      });
    });

    $('#yecenia').click(function() {
      $.colorbox({
        href: "/artists/yecenia",
        opacity: 0.5
      });
    });
  });
</script>

\$\endgroup\$
2
\$\begingroup\$
  1. Remove the id's from your buttons and move relevant data to attributes. (Personal preference, but reflected later)

    <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>
    
  2. Apply to all relevant buttons by class (might want new class instead of using btn-primary as I have done)

  3. fetch artist-specific data from attribute

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.