[jQuery] Re: How to load picture after picture (take 2)
On 14 Apr., 20:18, wyo [EMAIL PROTECTED] wrote:
Okay found the mistake myself just after posting.
$('#files').html('img src='+files[pos]+'
$('#pictures').html('img src='+files[pos]+'
div id=pictures
echo img src=\$files[0]\ class=\picture\;
/div
O. Wyss
[jQuery] Re: How to load picture after picture
On Apr 10, 11:58 pm, Jonathan Sharp [EMAIL PROTECTED] wrote: Another approach would be to print out the images like: echo img align=\center\ src=\$f\ style=\display: none;\ class=\photo\brbr; Doesn't this load all the pictures right away? Since I expect soon a few hundreds pictures I don't want to load all. And what about if the hiding (display:none) was done afterwards with Javascript? So a user with Javascript disabled would still see the pictures (of course all). O. Wyss
[jQuery] Re: How to load picture after picture
On 4/11/07, wyo [EMAIL PROTECTED] wrote:
On Apr 10, 11:58 pm, Jonathan Sharp [EMAIL PROTECTED] wrote:
Another approach would be to print out the images like:
echo img align=\center\ src=\$f\ style=\display: none;\
class=\photo\brbr;
Doesn't this load all the pictures right away? Since I expect soon a
few hundreds pictures I don't want to load all.
Yes, that is true, but they'll load in the order in which they appear in the
document so it will in effect be a preload for future images.
And what about if the hiding (display:none) was done afterwards with
Javascript? So a user with Javascript disabled would still see the
pictures (of course all).
You could do that too... here's another option:
echo img align=\center\ src=\$f\ class=\photo\brbr;
Then the following jQuery code:
$(function(){
$('img.photo').each(hidePhoto);
function showPhoto() {
this.src = this.$src;
$(this).show();
}
function hidePhoto() {
$(this).hide();
this.$src = this.src;
this.src = '';
}
$('img.next').bind('click', function() {
$('img.photo:visible').each(hidePhoto).next().is('img.photo
').each(showPhoto);
});
$('img.prev).bind('click', function() { $('img.photo:visible'
).each(hidePhoto).prev().is('img.photo').each(showPhoto);
});
});
Here's another slightly modified version that handles the image loading
issue as well as non-js.
-js
[jQuery] Re: How to load picture after picture
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\brbr;
}
}
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
[jQuery] Re: How to load picture after picture
Another approach would be to print out the images like:
echo img align=\center\ src=\$f\ style=\display: none;\
class=\photo\brbr;
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\brbr;
}
}
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
