1

首先快速免责声明：我是 javascript 新手，不是编码背景，但目前正在通过书籍、教程和经常访问这个站点来自己解决问题。但是，我非常感谢有关带有 javascript 函数的图片库的一些帮助。

我需要的解决方案是使用 javascript 将缩略图链接到同一页面上的较大图像，并在其下方显示相关文本描述。由于该网站是艺术家的作品集，因此目标是让艺术品以下面的标题、尺寸和价格显示 - 同时保持在同一页面上。

当前的网站http://www.barrymckayart.co.uk/animals.html这样做，虽然没有任何脚本，并且为每个图像链接创建一个单独的页面（纯粹是我的经验不足）。

我目前正在试验的脚本是：

<script type="text/javascript">
  function showImage(imgName) {
    var curImage = document.getElementById('currentImg');
    var thePath = 'images/animals/';
    var theSource = thePath + imgName;

    curImage.src = theSource;
    curImage.alt = imgName;
    curImage.title = imgName;

从视觉上看，这与现有网站相同，并且运行良好。但是，我不知道如何为每个图像引入特定的文本。我试图调用img title=""以及为每个缩略图创建一个 div 以包含p标签。不实用！我也尝试过创建一个figcaption，但所做的只是显示在缩略图下并使所有内容不对齐。

一个类似于我想要实现的画廊位于http://www.thekitchen.org/auction2010/#artwork。除了输入这篇文章之外，我还试图破译代码，因为我渴望学习 javascript，但解决这个问题的时间有限。

如果有人能提供任何指示、解决方案或建议，我将不胜感激。

谢谢你。

从那以后，我已经使用了这两种代码，现在正在玩弄哪个代码适合该站点。感谢大家的及时回答，感谢大家抽出宝贵的时间提供一些出色的支持。我想对这两个答案都投赞成票，但由于我是新手，我必须等到我的声望达到 16 岁。尽管如此，我真的不能感谢你。

4

2 回答 2

1

您需要为每个图像提供一个 id，然后您想使用 getAttribute("title") 来检索该属性。因此对于

<img src="../images/animals/thumbs/gorilla.jpg" id="gorilla" title="Gorilla (coloured pencils)" alt="Gorilla (coloured pencils)">

要获得这张图片的标题，你会做

g = document.getElementById("gorilla")
g.getAttribute("title"); // do what you need with the attribute

但是，最好将额外的数据存储在索引到 html 中的 ids 的对象中，有点像这样：（这里有一个 jsfiddle

<html>
    <head></head>
    <body>

        <a href="#" onclick ="showPicture('leopard');return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/leopard.jpg" title="Lone Leopard (
        watercolour)" alt="Lone Leopard (watercolour)" /></a>

        <a href="#" onclick ="showPicture('rhino'); return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/rhino.jpg" id="rhino" title="Rhino (coloured pencils)" alt="Rhino (coloured pencils)" /></a>
        <div><img src="http://www.barrymckayart.co.uk/images/animals/leopard.jpg" id="full_picture">
        </div>
        <h1 id="main_title">Leopard</h1>
        <div id="description">
            Lone Leopard
        </div>
        <div id="price">
            $3,340
        </div>

        <script>
            var data = {
                "rhino" : {
                    "title" : "Lone Rhino",
                    "desc" : "watercolor",
                    "price" : "$3,340",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/rhino.jpg"
                },
                "leopard" : {
                    "title" : "Lone Leopard",
                    "desc" : "watercolor",
                    "price" : "$3,000",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/leopard.jpg"
                }

            };

            function showPicture(id) {
                var main_image = document.getElementById("full_picture");
                var price = document.getElementById("price");
                var main_title = document.getElementById("main_title");
                var description = document.getElementById("description");

                main_image.src = data[id].full;
                price.innerHTML = data[id].price;
                main_title.innerHTML = data[id].title;
                description.innerHTML = data[id].desc;

            }
        </script>

    </body>

</html>

这有内联 onclick 事件，但是，嘿，如果时间有限....

于 2012-10-18T10:50:26.520 回答
0

我更愿意将信息存储在图像中，而不是单独的数据对象：

<img src="img/gorilla_thumbnail.jpg" class="thumbnail" title="Gorilla" alt="Gorilla" data-price="$1000" data-description="Description about the item" data-full-image="gorilla.jpg" />

我还推荐jQuery（如果您以前没有使用过它，它有很好的文档）在用户单击缩略图时动态更新页面。

$(document).ready(function () { 
  // Following event will handle click to any img with class 'thumbnail':
  $('img.thumbnail').click(function () { 
    // 'this' will refer to the clicked thumbnail
    $('#mainImage').attr('src', 'folder/subfolder/' + $(this).attr('data-full-image')); // <img id="mainImage" /> to display full sized image
    $('#mainDescription').html($(this).attr('data-description')); // <p id="mainDescription"> or similar to display description
    $('#mainTitle').html($(this).attr('title')); // <p id="mainTitle"> or similar to display title
    // etc
  }); 
});
于 2012-10-18T11:54:19.470 回答