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>