Home/ Questions/Q 8054019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:02:33+00:00

I’m facing a problem with a slider that I’m using on a website. (

  • 0

I’m facing a problem with a slider that I’m using on a website.
(http://www.cloosedesign.com)
The website is a portfolio I made for a friend. So there are severals works to show.
Each work is listed as a link, and when you click on the link it shows you the corresponding picture with the slider. (I’ve put some PHP to get the right pictures from the database Mysql).

It works fine, except on SAFARI. Indeed sometimes when I click on a link the text of the footer (white text on the black box) desappear and re-appear, like if the page was refreshing.
This pb appear sometimes after the 3rd click, or sometimes after more clicks.

here is my code :

in the <head> :
I’m calling jquery :

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

And I’m calling the javascript file for the slider :

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

then in the portfolio_english page I’m checking the images corresponding to the work selected (= $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>'; ?>

And just after the php code I write the following 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>

And then I call the footer.php file.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This http://jsfiddle.net/NNSqw/ is the code that does what I mean, it uses jquery and ajax, now, to explain the html bit is pretty straight forward the div with the id="content" will be where your content will get loaded into.

    Now to the JS/JQuery, everytime a user presses a link the content of the div with the id="content" gets changed, you will have to make a page named get_images.php and make it use the php code $_GET['realisation']; to get the number of the link clicked and from there it will work like your current page :).

    Sorry I’m not brilliant at explaining but, if you wish me to try and clarify it more just say 🙂

    Edit:

    Right in your portfolio_english.php file the following code should exists (I’m using the english version of your site):

    <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>

    You should have your links that the side, which have an onClick event leading them to the javascript function which should be in the head of the page:

    <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>

    Also in that file you should have the div where the images currently appear

    <div id="content">

</div>​

    get_image.php

    In your get_image.php you need to have what you currently use to get your images, so to get the number e.g. 41 into the php code you are using use:

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

    Also, if you still don’t understand where I’m going try reading the jquery documentation to see if you understand it more then: http://api.jquery.com/jQuery.ajax/

    • 0