Another approach would be to print out the images like:
echo "<img align=\"center\" src=\"$f\" style=\"display: none;\"
class=\"photo\"><br><br>";
Then the following jQuery code:
$(function(){
$('img.photo:first').show();
$('img.next').bind('click', function() {
$('img.photo:visible').hide().next().is('img.photo').show();
});
$('img.prev).bind('click', function() { $('img.photo:visible'
).hide().prev().is('img.photo').show();
});
});
Cheers,
-js
On 4/10/07, Giant Jam Sandwich <[EMAIL PROTECTED]> wrote:
In your foreach loop, instead of printing out the image, place all the
src references into a JavaScript array. Then, you would do something
like the following (this is a high level abstraction):
myImgSrcArray // array containing all your src references
curPos = 0
$(function(){
$("#my_images").html("<img src='"+myImgSrcArray[0]+"' />"); // your
first image
$(".prev").click(function(){
curPos--
$("#my_images").html("<img src='"+myImgSrcArray[curPos]+"' />");
});
$(".next").click(function(){
curPos++
$("#my_images").html("<img src='"+myImgSrcArray[curPos]+"' />");
});
});
<img src="prev.gif" class="prev" />
<img src="next.gif" class="next" />
<div id="my_images"></div>
Keep one thing in mind with my example above. There is no validation
-- if you get to the end of your array, you don't want to increment
"curPos" forward, or if "curPos" equals 0, you don't want to increment
"curPos" negatively. Above should give you enough to go on with jQuery
though :)
Brian
On Apr 10, 9:21 am, "wyo" <[EMAIL PROTECTED]> wrote:
> I currently retrieve all pictures of my gallery with the following PHP
> code
>
> $files = getFiles ($d);
> if (count ($files) > 0) {
> foreach ($files as $key => $f) {
> echo "<img align=\"center\" src=\"$f\"><br><br>";
> }
> }
>
> simply adding picture after picture. But since there will be many more
> pictures I'd like to load just the current and possibly the next one.
> A <prev> (disabled when current==first) and a <next> button should
> allow for moving through the pictures, loading the next one when
> needed. How could I do this with jQuery?
>
> O. Wyss
> Current implementation:http://www.orpatec.ch/index.php?page=gallery.php
