带阴影盒的照片库的列表/网格切换
List/Grid Toggle for Photo Gallery with Shadowbox
所以我对这个网站很陌生,对jquery和javascript也很陌生,但我对HTML和CSS有很好的理解。对于学校的一个班级,我正在使用Shadowbox插件制作一个照片库网页。我已经把这部分都记下来了,但其中一个要求是添加一些用户选项,用户可以更改这些选项,这些选项将保存在cookie中。(我还没有谈到cookie部分(作为我的选择,我决定添加一个切换,将页面的视图从带有图像的网格视图(默认(切换到只包含图像标题的列表视图。我想好了如何做到这一点,但决定使用循环可能会以更简单的方式完成。
这是我的HTML:
<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>
因此,这是一个有效的示例(无论如何,对于列表部分(,但在代码方面似乎太多了,因为我必须为每个图像重复:
$(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)
});
}):
以下是我想要的方式(你知道,除了在某种程度上有效(
$(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;
});
});
请告诉我我是怎么犯错的,请记住,我是新手,我感谢所有的回复!有更好的方法吗?我真的想保持简单。
我已经使用链接(JQuery如此方便的原因之一(和用于修改属性的循环简化了您的代码。我还没有测试过它,但它应该能满足你的需求——当你点击返回网格时,在添加图像之前,你可能必须清除链接中的文本。
$(document).ready(function(){
$("#list").click(function(){
$("#gallery a").removeClass("img").addClass("lst").each(function(index,el){
$(el).text($(el).attr("title"));
});
});
$("#grid").click(function(){
$("#gallery a").removeClass("lst").addClass("grid").each(function(index,el){
$(el).html("<img src='""+$(el).attr("href").replace("img","thumb")+"'" alt'""+$(el).attr("title")+"'"/>");
});
});
});
相关文章:
- 图片照片库
- 强制从手机上的照片库上传照片文件
- JS照片库.使大图像显示和缩略图可单击
- 移动照片库应用程序
- 如何在照片库中添加分页
- 在照片库中的两个元素之间切换样式会发生变化
- 如何实现复选框或面向类别的照片库
- 单击照片库中的图像
- 照片库css所选状态未被cookie读取
- 使用 PHP 或 Javascript 生成自动照片库
- 如何为图像创建具有随机大小的磁贴照片库
- 如何将不区分大小写添加到照片库搜索框jquery
- iPhone上的html文件到照片库的屏幕截图
- 带阴影盒的照片库的列表/网格切换
- 现有 JavaScript 照片库的图像淡入淡出效果
- 如何在Android上使用PhoneGap从照片库中获取图片
- 在执行漂亮的照片库后从“导航”中删除类“粘性”的错误
- Javascript:带有前进/后退按钮的照片库
- 使用Phonegap将图像保存到Iphone照片库
- 搜索 3D 照片库(HTML5 或 Flash)