0

I am trying to create a function with change the picture if I push on the image "prev" oder "next". Actually I have no idea how to realize that, because I get the source of the picture from the database.

$namen = array();
    $mainimg = array();
    $sql1 = mysql_query("SELECT * FROM image WHERE id = ".$id.";");

        echo "<div class='normal'>";

                while($row = mysql_fetch_array($sql1))
    {
        $namen[] = $row['bild']; 
        $mainimg[] = $row['mainimg'];
        $number_array = count($namen);
        ?>
        <script type='text/javascript'>
        <?php
        $php_array = array($row['bild']);
        $js_array = json_encode($php_array);
        echo "var javascript_array = ". $js_array . ";\n";
        ?>
        </script>
        <?php
        if($row['mainimg'] == 1){
            $bild = $row['bild'];
        }

    }


echo "<div class='rahmen'><div class='box'><a href='#' id='opn'><img style='position:absolute;margin:90px 0px 0px 130px;' src='images/lupe.png'>".$path.$bild."\"".$end."</a></div>
<div class='hover1 box1'></div><div onclick='prev()' class='hover2 box2'></div></div>";
echo "<a href='' onclick=\"\"><div id='next'></div></a>";
echo "<a href='' onclick=\"\"><div id='prev'></div></a>";

.rahmen {position:relative;cursor:pointer;}
.box1 { height:64px;width:53px;}
.box2 { height:64px;width:53px;margin-left:347px;}
.hover1 { background:url(images/prev1.png) no-repeat; }
.hover1:hover { background:url(images/prev.png) no-repeat; }
.hover1 { display:none;position:absolute;top:40%;}
div.rahmen:hover .hover1{ display:block;}
.hover2 { background:url(images/next1.png) no-repeat; }
.hover2:hover { background:url(images/next.png) no-repeat;}
.hover2 { display:none;position:absolute;top:40%; }
div.rahmen:hover .hover2{ display:block;}

Now I have the php-array in a javascript array. :-) I have actually two problems: - The click on my image "prev" and "next" doesn't work and I don't know why. Secondly I have no idea how to programm a function which change the image if you push next or prev. Can anybody help me please?

Thanks for your help in advance.

Regards, Yanick

yab86
  • 395
  • 6
  • 24

1 Answers1

0

If you need to know how to convert php array into js array, take a look at this answer. And if you don't know how to implement the gallery, please give a little bit more information, like: Do you use any gallery libraries? What libraries do you use? Etc...

Community
  • 1
  • 1
Yura Sokolov
  • 207
  • 4
  • 13
  • Hey Yura Sokolov. I tried it (see above). Now I have a array in javascript. I'd like to have my own gallery. It means without libraries. Which information else I can give you to make you able to help me? :-) – yab86 Aug 08 '13 at 20:07
  • [Here](http://www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/) you can find many image galleries, just choose one, but you will need jQuery for that. Again, if you have js array with image url's, you can add this script(it's basic functionality) – Yura Sokolov Aug 09 '13 at 14:52
  • `var i = 0; document.getElementById('next').onclick = function() { i++; document.getElementById('yourImageId').src = javascript_array[i]; }` This is just for the next button. Writing the code from mobile, so there may be some errors in it. – Yura Sokolov Aug 09 '13 at 14:59