- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
只是想知道是否可以调整我的代码以在加载时在页面上显示第一个目录的图像,以便在用户单击菜单选项之前显示它们,因为在菜单选项出现之前页面看起来有点不正常选中,这是我的代码,谢谢。
< script >
$(document).ready(function() {
$("a").click(function() {
var dir_path = $(this).data("albumid");
//var txt=$(this).text();
//$(this).text(txt);
LoadGallery(dir_path);
return false;
});
});
function LoadGallery(dir_path) {
$.ajax({
url: dir_path,
success: function(data) {
$(".image-container").empty();
$(data).find("a:contains(.jpg), a:contains(.png), a:contains(.jpeg)").each(function() {
this.href.replace(window.location.host, "").replace("http:///", "");
var file = dir_path + $(this).text();
$(".image-container").append($("<a href='javascript:;' class='thumb' data-src='" + file + "'><img src='" + file + "' title='Click to enlarge' alt='#'/></a>"));
if ($(".image-container").children("a").length === 30) {
return false;
}
});
$(".image-container").append("<strong><p>Click on a thumb nail to show a larger image.</p></strong>");
$(".thumb").bind('click', function() {
var Popup = "<div class='bg'></div>" + "<div class='wrapper'><img src='<img src=''/>" + "<label href='javascript:;' class='prev-image'>«</label><label href='javascript:;' class='next-image'>»</label><a href='javascript:;' class='close' title='Close'>Close</a>";
var Img = $(this).attr("data-src");
$("body").prepend(Popup);
$(".bg").height($(window).height() * 4);
$(".wrapper img").attr("src", Img);
$(".prev-image").bind('click', function() {
var prev = $(".image-container").find("img[src='" + Img + "']").parent().prev('a').find("img").attr('src');
if (!prev || prev.length === 0)
return false;
else {
$(".wrapper img").attr("src", prev);
Img = prev;
}
});
$(".next-image").bind('click', function() {
var next = $(".image-container").find("img[src='" + Img + "']").parent().next('a').find("img").attr('src');
if (!next || next.length === 0)
return false;
else {
$(".wrapper img").attr("src", next);
Img = next;
}
});
$(".close").bind('click', function() {
$(this).siblings("img").attr("src", "")
.closest(".wrapper").remove();
$(".bg").remove();
});
});
}
});
}; < /script>
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
#nav {
float: left;
width: 20px;
margin: 10px 10px 20px 0px;
}
#nav,
#nav ul {
list-style: none;
padding: 0;
}
#nav a {
position: relative;
display: block;
width: 105px;
padding-left: 10px;
margin: 3px 0;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: bold;
color: #fff;
}
#nav a:link,
#nav a:visited {
border-left: #00425E solid 10px;
color: #fff;
}
#nav a:hover,
#nav a:active {
border-left-color: #fff;
background-color: #770709;
color: #fff;
}
#nav a#here {
border-left-color: #fff;
background-color: transparent;
color: #fff;
}
#nav ul {
margin-left: 20px;
}
#nav ul a {
width: 50px;
color: #fff;
}
.image-container {
padding-top: 50px;
}
.image-container img {
background-color: white;
border: 4px solid #444;
box-shadow: 0 0 5px #222;
padding: 3px;
margin-top: 10px;
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
transition: all .7s ease-in-out;
}
.image-container img:hover {
border: 4px solid #888;
cursor: zoom-in;
}
.bg {
background-color: #333;
filter: alpha(opacity=70);
left: 0;
opacity: 0.7;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.wrapper {
background-color: white;
border: 3px solid #444;
box-shadow: 0 0 5px #222;
padding: 3px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
}
.wrapper .next-image {
position: absolute;
font-size: 2.8em;
top: 50%;
color: #999;
width: 45px;
line-height: 30px;
text-align: center;
height: 45px;
border-radius: 100%;
opacity: 0.7;
filter: alpha(opacity=40);
/* For IE8 and earlier */
right: 10px;
left: auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrapper .prev-image {
position: absolute;
font-size: 2.8em;
top: 50%;
color: #999;
width: 45px;
line-height: 30px;
text-align: center;
height: 45px;
border-radius: 100%;
opacity: 0.7;
filter: alpha(opacity=40);
/* For IE8 and earlier */
left: 10px;
right: auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrapper .prev-image:hover {
border: 2px solid #ccc;
cursor: pointer;
opacity: 1;
}
.wrapper .next-image:hover {
border: 2px solid #ccc;
cursor: pointer;
opacity: 1;
}
.close {
background: transparent url(../gallery/close.png) no-repeat;
height: 32px;
position: absolute;
right: -16px;
text-indent: -9999px;
top: -16px;
width: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-container" style="height: 600px;">
<div id="content" style="height: 600px;">
<div style="float: left; width: 200px;">
<h1> <span>The Gallery</span> </h1>
<ul id="nav">
<li><a href="" id="here">Gallery</a>
<ul>
<li><a href="#" data-albumid="images/gallery/fld01/">2014</a>
</li>
<li><a href="#" data-albumid="images/gallery/fld02/">2014</a>
</li>
<li><a href="#" data-albumid="images/gallery/fld03/">2014</a>
</li>
<li><a href="#" data-albumid="images/gallery/fld04/">2015</a>
</li>
<li><a href="#" data-albumid="images/gallery/fld05/">2015</a>
</li>
</ul>
</li>
<li><a href="../index.html">Back to home</a>
</li>
</ul>
</div>
<div class="image-container">
<strong><p>Select a menu option to display a list of thumb nails.</p></strong>
</div>
<div class="clear"></div>
</div>
</div>
最佳答案
添加 LoadGallery($('a[data-albumid]:first').data('albumid'));
在你的 $(document).ready()
功能如下。 $('a[data-albumid]:first')
将选择具有 data-albumid
属性的第一个 a
。希望这对您有所帮助。
$(document).ready(function () {
LoadGallery($('a[data-albumid]:first').data('albumid'));
$("a").click(function () {
var dir_path = $(this).data("albumid");
//var txt=$(this).text();
//$(this).text(txt);
LoadGallery(dir_path);
return false;
});
});
关于javascript - 在页面加载时显示目录中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34251916/
我正在为我的程序编写安装脚本,它应该在 Linux/Unix 操作系统上运行。以下文件的默认目录是什么: 可执行文件(程序)。程序应通过从命令行键入其名称来执行。 共享库。 第三方共享库(程序未开源,
我有一堆用户、组和应用程序注册,我的 MVC 应用程序使用 AAD 数据进行身份验证和授权。是否可以将 Azure Active Directory 从一个租户(目录)迁移到另一个租户(目录)?如果可
查看 cljsbuild 文档 https://github.com/emezeske/lein-cljsbuild :cljsbuild { :builds [{ ; The
忽略已经版本控制的文件 如果你不小心添加了一些应该被忽略的文件,你如何将它们从版本控制中去除而不会丢失它们?或许你有自己的IDE配置文件,不是项目的一部分,但将会花费很多时间使之按照自己的方式工作。
我想使用\tableofcontents 命令,但没有目录从新页面开始或在末尾创建新页面,并且所有内容都是单倍行距。我怎样才能做到这一点?我假设使用 tocloft,但有哪些选择? 谢谢 最佳答案 试
我有一些 javascript 菜单代码,可以在单独的目录中正常工作。但是,当我尝试从同一目录中调用相同的 .js 文件时,它不会看到这些文件。 以下内容来自另一个目录: script type="t
我有这样的路径: /my/path/to/important_folder 在同一级别上,我还有其他文件和文件夹想要在达到与 important_folder 相同的级别时列出。 我的文件夹可能更深,
1、获取文件路径实现 1.1 获取当前文件路径 ? 1
我正在使用最新版本的 NTEmacs。 我写了一个名为“.dir-locals.el”的文件,如下所示。 ((nil . ((tab-width . 8) (fill-column .
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
在我的 .vimrc 中有这些行 :set foldmethod=marker :set foldmarker=SECTION:,ENDSECTION: 用于自定义代码折叠。在我的文件中,相关语言的注
在 fish 中: for x in * echo $x end *这里包括所有目录和文件,如何只列出文件(或目录)? 最佳答案 fish 没有很多花哨的通配语法。但是,目录可以像这样迭代: f
这是我的目录结构: ├── src │ ├── helpers │ │ ├── __init__.py │ │ ├── foo.py │ │ └── bar.py │
我想递归重命名文件夹/目录名称并找到 this solution所以。但是这个命令没有效果 find . -type f -exec rename 's/old/new/' '{}' \; 这是一个正
我想在相册中创建一个文件夹,并希望将图像保存在创建的相册中。 这可能吗?有什么办法可以做到这一点吗? 我已经搜索过,大多数人都说这是不可能的。 感谢您的帮助。 最佳答案 您也许可以使用AssetsLi
如何在python中使用用户定义的名称创建临时文件/目录。我知道 tempfile .但是我看不到任何以文件名作为参数的函数。 注意:我需要这个来对包含临时文件的临时目录上的 glob(文件名模式匹配
我在项目中使用JaCoCo Gradle插件。 作为问题的一个示例,我的大部分代码都在com.me.mysoftware包下。 我正在使用代码生成器来生成build/generated/java/..
我正在尝试使用 Gradle 开始运行 jar 文件 我的任务如下所示: task startServer(type: Exec) { workingDir file("${buildDir}/a
如何在 Ant 中定义一个目录集,其中包括两个目录:项目的基目录和子目录“test”? 看起来您无法使用“/”、“.”或“”专门包含目录集的根目录。例如,这包括“./test”,但不包括“.”:
我正在使用 CTAGs 包,它使用 Sublime Text 2 生成两个文件 .tags 和 .tags_sorted_by_file。 那么当我进行项目搜索(CMD + SHIFT + F)时,如
我是一名优秀的程序员,十分优秀!