Mardo, según el código que ya veniamos trabajando, osea, por como esta ordenado todo antes de ser una galería jquery.. Como iría el código de ésta galería que te paso a continuación, para que funcione presionando uno de los círculos y aparezca la misma imagen en grande osea otra imagen que ya tengo con las nuevas medidas..
http://dimsemenov.com/plugins/magnific-popup/ - Es la que dice LightBox Gallery
Gracias
HTML
<div id="galeria">
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/1full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/2full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/3full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/4full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/5full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/6full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/7full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/8full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/9full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/10full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/11full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/12full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/13full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/14full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/15full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/16full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/17full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/18full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/19full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/20full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/21full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/22full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/23full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/24full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/25full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/26full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/26full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/27full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/28full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/29full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/30full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/31full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/32full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/33full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/34full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/34full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/35full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/36full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/37full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/38full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/39full.png"/>
</a>
<a class="bluecircle" href="#">
<img width="150px" height="150px" src="circulosdecolor/40full.png"/>
</a>
</div>
CSS
#galeria { margin-left: 70px;
margin-top: 60px;
width: 1200px;}
a.bluecircle {float: left;
display: block;
height: 150px;
position: relative;
margin-bottom: 40px;
width: 150px;
padding: 20px;
}
a.bluecircle:before {
border-radius: 150px;
content: "";
position: absolute;
top: 40px;
left: 40px;
width: 150px;
height: 150px;
background: none;
transition: background .2s linear;
}
a.bluecircle:hover:before {
background: rgba(0, 138, 184, .5);
}
a.bluecircle:hover {
filter: grayscale(0%);
}
img {
border-radius: 150px;
padding: 20px;
}