Question

好的，请放轻松我，因为我是编程的新手，但现在有相当不错的HTML和CSS知识。

基本上我有一个网站http://www.samuivillaretreats.com，在页面顶部的主页上是使用Diapo的photoalbum。此幻灯片显示在DIV中，并与组成每张幻灯片上的信息的隐藏DIV列表相关联（幻灯片和标题信息的URL）。幻灯片的代码是使用内容管理系统添加的。与Diapo幻灯片相关联的.JS文件被编码到主页的HEAD部分，该部分是用于每个网页的HEAD代码 - 不仅仅是homepoage

目前，网站的每个页面都会显示主页幻灯片。我想要做的是创建一个特定于投资组合中的别墅属性的slieshow - 所以当用户点击特定的假日属性时，幻灯片放映打开与主页幻灯片放映相同的位置。我正在考虑创建一个具有唯一ID的DIV加载，它包含特定属性的信息并将它们存储在特定的HTML文件中。

所以我需要将主页DIV代码与属性的特定代码交换。我以为可以通过读取URL来完成与正确幻灯片放映的交换，因为每个属性都有一个与属性对应的唯一URL结尾。

最后，我可以访问HEAD部分代码，但是这个HEAD代码在网站的每个页面上使用-i.e我无法访问特定别墅属性页面的特定HEAD区域。

任何想法都会非常感激 - 我在这个网站上已经阅读了很多关于DIV交换的信息，关于使用按钮和URL末尾的哈希，但我没有任何意义。

Answer 1

您网站上diapo.js第318行的此代码选择幻灯片中的哪些图片

var allImg = new Array(); //I create an array for the images of the slideshow
    $('img', elem).each( function() { 
    allImg.push($(this).attr('src'));

diapo.js的作用是从所有img元素中检索src属性（之后，检索IE 8的滑块div的背景图像 - 。

如果您通过CMS输入幻灯片显示的图像，并且没有选项可以将特定于站点的内容更改为特定于页面，那么我不知道如何实现它。也许是ASP或PHP，但我不太了解这个建议。

然而，你可以做的是在每个页面中创建这样一个div：

<div id="slider_img_links">
   <img src="example.jpg"></img>
   <img src="example2.jpg"></img>
</div>

..包含您想要在滑块中显示的所有图像。

之后，将我在这里提到的diapo.js代码（第318行）替换为：

var allImg = new Array(); //I create an array for the images of the slideshow
    $('#slider_img_links').children('img').each( function() { 
    allImg.push($(this).attr('src'));

或者如果您还不完全信任.each函数，

var allImg = new Array(); //I create an array for the images of the slideshow
var imgLinks = $('#slider_img_links').children('img');
for(i=0;i<imgLinks.length;i++) {
    var oneLink = imgLinks[i].attr('src')
    allImg.push(oneLink);
    }

通常可以删除Diapo.js第322-342行而不会产生任何后果。我没有测试过这个，但它应该可以工作。

PS（与问题无关，但对于您的网站）：

你已经包含了jQuery（Javascript库）3x（所以你可以删除2 他们）;
您的CMS生成基于表格的布局，本文解释了原因这是不好的： http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

在依赖于URL打开的网页上交换DIV代码

1 个答案: