/    Sign up×
Community /Pin to ProfileBookmark

Image Viewer Problems

Copy linkTweet thisAlerts:
Apr 11.2006

First of all, this is one of my first ventures into more extensive JavaScript so bear with me.

I am trying to set up a simple image gallery script. It only displays one full image at a time and it has next and previous buttons on top of it. It pulls the image out of a database and I have it setup where the image name is something like “picture.php?catid=1&num=12”. The num variable is what specifies which picture to pull from the database. So if the page is currently displaying image 12, the next button needs to point to 13 and the previous to 11. Also, if it’s the first picture I need for the previous button to be hidden and the next button hidden if it’s the last picture. What would be the best way to do this?

I’ve tried to set it up with the following code but I’m having problems getting the onclick actions to change on the links:

[CODE]
<div id=”pictures”>
<div id=”buttons”>
<a onClick=”return showPic(0)” href=”#” id=”prevlink”><img src=”images/prevbutton.jpg” border=”0″ id=”prev” style=”visibility:hidden;”></a> &nbsp;
<a onClick=”return showPic(1)” href=”#” id=”nextlink”><img src=”images/nextbutton.jpg” border=”0″ id=”next”></a>
</div>
<p><img src=”picture.php?catid=1&num=0″ id=”imageplaceholder”></p>
</div>
[/CODE]

Here’s the JavaScript:

[CODE]
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById(‘imageplaceholder’).src = ‘picture.php?catid=1&num=’ + whichpic;
if (whichpic > 0) {
document.getElementById(‘prev’).style.visibility = ‘visible’;
}
if (whichpic < [php_image_count] ?>) {
document.getElementById(‘next’).style.visibility = ‘visible’;
}
if (whichpic == [php_image_count] ) {
document.getElementById(‘next’).style.visibility = ‘hidden’;
}
if (whichpic == 0) {
document.getElementById(‘prev’).style.visibility = ‘hidden’;
}
var newprev = whichpic – 1;
var newnext = whichpic + 1;
document.getElementById(‘prevlink’).onclick = ‘return showPic(‘ + newprev + ‘)’;
document.getElementById(‘nextlink’).onclick = ‘return showPic(‘ + newnext + ‘)’;

return false;
} else {
return true;
}
}
[/CODE]

Thanks for any help!

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@James_GatkaApr 11.2006 — 
-----
Copy linkTweet thisAlerts:
@konithomimoApr 11.2006 — The function:
function showPic(i)
{
var s = document.getElementById('imageplaceholder').src;
var p = document.getElementById('prevlink');
var n = document.getElementById('nextlink');
p.style.visibility='visible';
n.style.visibility='visible';

//this could also be done with substrings
var t = parseInt(s.charAt(s.length-2)+s.charAt(s.length-1));

if((t+i)==0)
p.style.visibility='hidden';

if((t+i)==[php_image_count])
n.style.visibility='hidden';

s.src='picture.php?catid=1&amp;num='+(t+i);
return true;
}

and then the actual images:
<i>
</i>&lt;div id="pictures"&gt;
&lt;div id="buttons"&gt;
&lt;a onClick="showPic(-1)" href="#" id="prevlink"&gt;&lt;img src="images/prevbutton.jpg" border="0" id="prev" style="visibility:hidden;"&gt;&lt;/a&gt; &amp;nbsp;
&lt;a onClick="showPic(1)" href="#" id="nextlink"&gt;&lt;img src="images/nextbutton.jpg" border="0" id="next"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;p&gt;&lt;img src="picture.php?catid=1&amp;num=0" id="imageplaceholder"&gt;&lt;/p&gt;
&lt;/div&gt;

Of course, there are 3 other things that you might want to try:

  • 1. Use display instead of visibility:
    function showPic(i)
    {
    var s = document.getElementById('imageplaceholder').src;
    var p = document.getElementById('prevlink');
    var n = document.getElementById('nextlink');
    p.style.visibility='block';
    n.style.visibility='block';

    //this could also be done with substrings
    var t = parseInt(s.charAt(s.length-2)+s.charAt(s.length-1));

    if((t+i)==0)
    p.style.visibility='none';

    if((t+i)==[php_image_count])
    n.style.display='none';

    s.src='picture.php?catid=1&amp;num='+(t+i);
    return true;
    }

  • 2. Just disable the buttons:
    function showPic(i)
    {
    var s = document.getElementById('imageplaceholder').src;
    var p = document.getElementById('prevlink');
    var n = document.getElementById('nextlink');
    p.disabled='false';
    n.disabled='false';

    //this could also be done with substrings
    var t = parseInt(s.charAt(s.length-2)+s.charAt(s.length-1));

    if((t+i)==0)
    p.disabled='true';

    if((t+i)==[php_image_count])
    n.disabled='true';

    s.src='picture.php?catid=1&amp;num='+(t+i);
    return true;
    }

  • 3. Just have the images loop through. This means that if you get to the first image and you hit previous it will take you to the last image:
    function showPic(i)
    {
    var s = document.getElementById('imageplaceholder').src;
    var p = document.getElementById('prevlink');
    var n = document.getElementById('nextlink');
    p.disabled='false';
    n.disabled='false';

    //this could also be done with substrings
    var t = parseInt(s.charAt(s.length-2)+s.charAt(s.length-1));
    var sr = (t+i);

    if(sr==-1)
    sr=[php_image_count];

    if(sr&gt;[php_image_count])
    sr=0;

    s.src='picture.php?catid=1&amp;num='+sr;
    return true;
    }
    • Copy linkTweet thisAlerts:
    @freshwebsauthorApr 11.2006 — Thanks so much. I changed around some things and it works great except for one thing.

    In the HTML, if I set the visibility of the prev link to hidden (because the prev link isn't needed for the default first image) the script will not make it visible. Any ideas??

    Below is the JavaScript function:

    [CODE]
    function showPic(i) {
    var pic = document.getElementById('imageplaceholder');
    var prev = document.getElementById('prevlink');
    var next = document.getElementById('nextlink');
    prev.style.visibility='visible';
    next.style.visibility='visible';

    //this could also be done with substrings
    var t = parseInt(pic.src.substring(pic.src.indexOf('num=')+4));

    if((t+i)==0) {
    prev.style.visibility='hidden';
    }

    if((t+i)==<? print $imagecount-1; ?>) {
    next.style.visibility='hidden';
    }

    pic.src = 'picture.php?catid=<? print $_GET['id']; ?>&num='+(t+i);

    //set image captions
    var captions = [<? print $titlearray; ?>];
    document.getElementById('imagetext').innerHTML = captions[t+i];

    return true;
    }
    [/CODE]
    Copy linkTweet thisAlerts:
    @konithomimoApr 12.2006 — Setting the visibility inline shouldnt make a difference whether or not the script can make it be visibile. Something else would be causing the problem. To make sure though remove the visibility from your prev button and add this to your body tag:

    onload="document.getElementById('prevlink').style.visibility='none';"

    or if need be you can alter the function with 1-2 more lines of code and get the same thing.
    ×

    Success!

    Help @freshwebs spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...