List/Grid Toggle for Photo Gallery with Shadowbox
- by InfamouslyBubbly
so I'm new to this site, and new to jquery, and javascript as a whole really, but I have very good comprehension of HTML and CSS. For a class in school, I'm making a photo gallery webpage using the Shadowbox plugin. I have that part all down, but one of the requirements is to add some sort of user option that the user can change that will get saved in a cookie. (I haven't gotten to the cookie part yet) For my option, I decided to add a toggle that will switch the view of the page from a grid view (default) with images, to a list view of just the captions of the images. I figured out how to do that, but decided it could probably done in a much simpler fashion with the use of loops.
Here is the HTML I have:
<body>
<div id="preferences">
<h1>My Photo Gallery</h1>
<ul id="options">
<li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li>
<li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li>
</ul>
</div>
<div id="gallery">
<a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a>
<a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a>
</div>
</body>
So here is the sample that works (for the list portion anyways), but seems excessive in terms of code since I'd have to repeat for each image:
$(document).ready(function(){
$( "#list" ).click(function() {
$( "a.l1" ).removeClass( "img" );
$( "a.l1" ).addClass( "lst" );
$( "a.l1" ).text( $( "a.l1" ).attr( "title" );
//repeat for l1 through l12 (that`s the letter L not a 1)
});
$( "#grid" ).click(function() {
$( "a.l1" ).removeClass( "lst" );
$( "a.l1" ).addClass( "grid" );
//actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML???
//repeat for l1 through l12 (again, that`s the letter L not a 1)
});
}):
And here is kinda how I'd like it (Y'know, except in a way that works)
$(document).ready(function(){
var i = 1;
var selcur = $( "'a.l" + i + "'" );
var title = selcur.attr( "title" );
var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>';
$( "#list" ).click(function() {
while (1<=12) {
selcur.addClass("lst");
selcur.removeClass("img");
selcur.text( title );
i++;
}
i = 1;
});
$( "#grid" ).click(function() {
while (1<=12) {
selcur.removeClass("lst");
selcur.addClass("img");
selcur.text( image );
i++;
}
i = 1;
});
});
Please tell me how I am going about this wrong, keep in mind again I'm new to this, I appreciate any and all responses! Is there a better way to do this? I really want to keep it simple.
