javascript - 需要帮助解决 slider javascript 与 Safari 的冲突

标签 javascript slider

我在网站上使用的 slider 遇到问题。 (www.cloosedesign.com) 该网站是我为 friend 制作的作品集。所以有几件作品要展示。 每件作品都以链接形式列出,当您单击该链接时,它会显示带有 slider 的相应图片。 (我使用了一些 PHP 来从数据库 Mysql 中获取正确的图片)。

除了 SAFARI 之外,它运行良好。事实上,有时当我单击链接时,页脚的文本(黑框上的白色文本)会消失并重新出现,就像页面正在刷新一样。 该 pb 有时在第三次单击后出现,有时在多次单击后出现。

这是我的代码:

<head> : 我正在调用 jquery :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

我正在调用 slider 的 javascript 文件:

<script type="text/javascript" src="js/slides.min.jquery.js"></script>

然后在portfolio_english页面中我检查与所选作品相对应的图像(= $contenu):

<?
        $images_sql = "SELECT * FROM `a_fichier`
                WHERE id_fiche=".$contenu."
                    ORDER BY tri";
        $images = mysql_query($images_sql);

        echo'<div id="slides">';
        echo '<div class="slides_container">';

        while ($image=mysql_fetch_array($images))
            {
            echo "<img src='Images/PorteDoc2/".$image['nom']."' width='540' height='600' alt='".$image['titre']."' />"; 
            }
        echo '</div>';
        echo '</div>'; ?>

在 php 代码之后,我编写了以下 javascript:

<script type="text/javascript">
$(document).ready(function() {
    $('#slides').slides({
        preload: true,
        preloadImage:'Images/img/loading.gif',
        pagination: true,
        fadeSpeed: 0,
        slideSpeed: 0,
        effect: 'slide, slide',
    });
});
</script>

然后我调用 footer.php 文件。 谢谢

最佳答案

这个http://jsfiddle.net/NNSqw/是执行我的意思的代码,它使用 jquery 和 ajax,现在解释 html 位非常简单,带有 id="content" 的 div 将是您的内容加载的位置进入。

现在对于 JS/JQuery,每次用户按下 id="content" 的链接时,div 的内容都会发生更改,您必须创建一个名为 get_images.php 的页面并让它使用 php 代码 $_GET['realization']; 来获取点击链接的数量,然后它就会像当前页面一样工作:)。

抱歉,我不擅长解释,但是,如果您希望我尝试进一步澄清,请说:)

编辑:

在您的 portfolio_english.php 文件中应该存在以下代码(我使用的是您网站的英文版本):

<span class="link" onClick="javascript: show_image('1')">Entreprise internationale    1</span><br>
<span class="link" onClick="javascript: show_image('2')">Entreprise internationale 2</span><br>
<span class="link" onClick="javascript: show_image('3')">Entreprise internationale 3</span><br>
<span class="link" onClick="javascript: show_image('4')">Entreprise internationale 4</span>

您应该在侧面有链接,其中有一个 onClick 事件,将它们引导至应该位于页面头部的 javascript 函数:

<html>
     <head>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript">
         show_image(no){
             $.ajax({
                 url: 'get_images.php?realisation='+no,
             success: function(data) {
                 $('#content').html(data);
            }
          });
         }
     </script>
    [... rest of header ...]
    </head>

此外,在该文件中,您应该拥有当前显示图像的 div

<div id="content">

</div>​

get_image.php

在 get_image.php 中,您需要拥有当前用于获取图像的内容,以便获取数字,例如41 进入您正在使用的 php 代码中使用:

<?php
$number = $_GET['realisation'];
[... Rest of php code to retrieve images ...]
?>

此外,如果您仍然不明白我要说什么,请尝试阅读 jquery 文档,看看您是否更理解:http://api.jquery.com/jQuery.ajax/

关于javascript - 需要帮助解决 slider javascript 与 Safari 的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10879861/

相关文章:

javascript - 在没有 Internet 连接时使用 jQuery

java - 如何在 Selenium WebDriver 中滑动{移动} slider

android - 从搜索栏更改拇指颜色

javascript - Slick.js:Slick slider 无法正确拖动(弹回到第一张幻灯片)

slider - EFCircularSlider - 如何避免 slider 滑过最大值集

python - 使用 matplotlib.widgets 中的 slider 后如何获取条形图值?

javascript - 如何监视服务以测试它 -- AngularJS/Jasmine

javascript - 缩小包含服务器端标签的 javascript

javascript - 带有感染代码的 HTA 文件。它是用HEX等方式编码的

javascript - jQuery 打开目标元素的默认上下文菜单