Question

我一直在寻找能够找到模拟此效果的jQuery插件的日子：http://www.theworldwelivein.co.uk/。单击缩略图时，会出现一个隐藏的div，显示该特定项目的幻灯片。

我甚至尝试使用AJAX和PHP与jQuery来模拟这种效果，但无济于事。

有人能指出我正确的方向吗？

HTML代码 - 在index.html中显示缩略图的简单列表。 AJAX函数在'onclick'函数上执行。

<ul class="portfolio-area"> 
<li class="portfolio-item2" value="1" onclick="showUser(this.value)" data-id="id-0"      data-type="cat-item-4">    
<div>
<span class="image-block">
<a class="image-zoom" title="Wall-E"><img width="225" class="walleee"  height="140"  src="images/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" /></a></span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a>       </h2>
<p class="post-subtitle-portfolio">released: 2008</p>
</div>
</li>
<ul>

<div id="myDiv"></div>

AJAX代码 - 使用'GET'方法通过AJAX将所选图像列表项的值发送到名为sliderthumbs.php的.php文件。然后，.php文件中的内容将显示在index.html中的“myDiv”DIV中。 HTML代码中的列表的值为“1”，因此该号码将被发送到.php文件以生成幻灯片1.

function showUser(str)
{
if (str=="")
{
$(function () {

  // Slideshow 3
  $("#slider3").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function () {
      $('.events').append("<li>before event fired.</li>");
    },
    after: function () {
      $('.events').append("<li>after event fired.</li>");
    }
    });

   });
  document.getElementById("myDiv").innerHTML="";
  return;

 }
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari

 xmlhttp=new XMLHttpRequest();
 }
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}
}
xmlhttp.open("GET","sliderthumbs.php?q="+str,true);

xmlhttp.send();
}

PHP文件 - 这将根据用户选择的缩略图将数据输出到index.html中的“myDiv”DIV。我想在隐藏的div中显示幻灯片。第一个图像出现但功能未启用 - 因此最终结果只是静态图像而不是活动幻灯片。有外部.js文件。

 <?php

$q=$_GET["q"];


if ($q=="1")
{
echo 'You have selected slideshow 1';

}

?>

<!DOCTYPE html>

<head>

<link rel="stylesheet" href="css/responsiveslides.css" />
 <link rel="stylesheet" href="css/demo.css" />

</head>
<body>

<div id="wrapper">

<div class="callbacks_container">
  <ul class="rslides" id="slider3">
    <li>
      <img src="images/1.jpg" alt="" />

    </li>
    <li>
      <img src="images/2.jpg" alt="" />

    </li>
    <li>
      <img src="images/3.jpg" alt="" />

    </li>
   </ul>
  </div>
  </div>
 </body>
 </html>

我尝试将.php文件中的脚本链接放入index.html文件，但问题仍然存在。我知道PHP是服务器端而JS是客户端 - 我认为这就是问题所在，但我不知道如何纠正这个问题。我的最终目的是根据用户通过AJAX选择的缩略图显示动态幻灯片。幻灯片本身作为.html文件工作，但当我将它放在.php文件中时，它变为静态。

JQuery拇指与隐藏的幻灯片div

0 个答案: