|
|||||||
New to SitePoint Forums? Register here for free!
|
 |
|
|
Thread Tools | Display Modes |
Jan 21, 2005, 23:31
|
#1 |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
Modifying A Simple Image Gallery - dymanic links?
I found A Simple Javascript Image Gallery over at cross-browser.com
http://www.cross-browser.com/x/examples/img_gallery.php and i really like the way it works for a somewhat dynamic client side way of creating a gallery.  I am interested however in modifying the following code so that i can wrap the images in link tags so that the user can click on the thumbnails and open up the full size image. I know how to make links via standard HTML but am interested in using the same method as the img tags are created so it is more dynamic (and very clean) Mike if you can offer any insight it would be greatly appreciated as my JS skills are lacking  Thanks and ROCK ON! Code:
<script type='text/javascript'>
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
</script>
<style type='text/css'>
#prev, #next {
font-weight:bold;
margin-right:20px;
}
</style>
<script type='text/javascript'>
var imgsPerPg = 5;
var imgsMax = 30;
function winOnLoad()
{
if (document.getElementById) {
var n = 1, a = xGetURLArguments();
if (a.length) {
n = parseInt(a[0]);
if (n <= 0 || n > imgsMax) {
n = 1;
}
}
setImages(n);
setLinks(n);
}
}
function setImages(firstNum)
{
var i, img, id;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
img.alt = img.src = 'thumbnails/' + leadingZeros(firstNum + i) + '.jpg';
}
}
function setLinks(firstNum)
{
var n = document.getElementById('next');
if (firstNum + imgsPerPg < imgsMax) {
n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
}
else {
n.style.visibility = 'hidden';
}
var p = document.getElementById('prev');
if (firstNum > imgsPerPg) {
p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
}
else {
p.style.visibility = 'hidden';
}
}
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function leadingZeros(num) {
if ( num < 10) return "00" + num;
else if ( (num > 9) && (num < 100) ) return "0" + num;
else if ( num > 99 ) return "" + num;
}
</script>
</head>
<body>
<h3>page title</h3>
<div>
<img id='001'>
<img id='002'>
<img id='003'>
<img id='004'>
<img id='005'>
</div>
<div>
<a id='prev' href=''><< Previous</a>
<a id='next' href=''>Next >></a>
</div>
</body>
</html>
|
|
|
|
Jan 21, 2005, 23:52
|
#2 | |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
i thinkwhat i am trying for is somethign like this...
Code:
<div> <a id='001' href=''><img id='001'></a> <a id='002' href=''><img id='002'></a> <a id='003' href=''><img id='003'></a> <a id='004' href=''><img id='004'></a> <a id='005' href=''><img id='005'></a> </div> Quote:
|
|
|
|
|
|
Jan 22, 2005, 00:28
|
#3 |
|
I'll take mine raw
 
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Hi CliffHanger9,
Thanks, glad you like my little toy Good work, your js should work - but remember that every 'id' must be unique in the document. Here's another way to do it. I added this CSS: Code:
img {
cursor:pointer;
}
Code:
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.title = 'Click to view large image';
img.alt = img.src = src + '_tn.jpg'; // img to load now
img.onClickSrc = src + '.jpg'; // img to load onclick
img.onclick = imgOnClick;
}
}
function imgOnClick()
{
window.location = this.onClickSrc;
}
 |
|
|
|
|
Jan 22, 2005, 08:38
|
#4 | |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
wow excellent mike - thats brilliant!
 i am really liking this more and more - that last modification worked very well i guess there is no way to hide the ones that dont exist though eh? for example if you set the max images to 40 but you only have 35 pictures then on a page that is displaying 20 pictures per page, there are 5 empty slots with the wee red X's in them. anyway to hide those? also, as i play around with these i am thinking of sending the image id to a template page that would be an html page with the image dynamically loaded depending on the vars you pass into it - rather than just load the image with no navigation back to the gallery the advantage of this html page is that i could put a link back to the gallery page as well as create a slideshow type mechanism with a forward backward type arrows so the user could advance (or reverse) the large images. so i was thinking if i modified the code to this... Quote:
In fact to accomplish this a similar mechanism as your gallery to capture the pic id (..slide.html?pic=003) as well as your previous/next mechanism to advance the slideshow would probably work, right? Have you done this (or something similar) already Mike? If so I would be interested in seeing it.. If not, any suggestions on how to go about this? Again, thanks Mike - I admire your work! rock on! |
|
|
|
|
|
Jan 24, 2005, 11:22
|
#5 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Thanks very much, CliffHanger9
For the first question (hide those that don't exist), I added one line to setImages() and added a function: Code:
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.title = 'Click to view large image';
img.alt = img.src = src + '_tn.jpg'; // img to load now
img.onClickSrc = src + '.jpg'; // img to load onclick
img.onclick = imgOnClick;
img.onerror = imgOnError; // I added this line
}
}
function imgOnError()
{
this.style.display = 'none';
}
|
|
|
|
|
Jan 24, 2005, 17:23
|
#6 | |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
Quote:
I tryed this with the following code... gallery.html Code:
<html>
<head>
<title>Image Gallery</title>
<style type="text/css">
#galPrev, #galNext {
font-weight:bold;
margin-right:20px;
}
img {
cursor:pointer;
}
</style>
<script type="text/javascript">
var imgsPerPg = 20;
var imgsMax = 40;
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
function winOnLoad()
{
if (document.getElementById) {
var n = 1, a = xGetURLArguments();
if (a.length) {
n = parseInt(a[0]);
if (n <= 0 || n > imgsMax) {
n = 1;
}
}
setImages(n);
setLinks(n);
}
}
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.title = 'Click to view large image';
img.alt = img.src = src + '_tn.jpg'; // img to load now
img.onClickSrc = 'slide.html?pid=' + leadingZeros(firstNum + i); // img to load onclick
img.onclick = imgOnClick;
img.onerror = imgOnError;
}
}
function imgOnClick()
{
window.location = this.onClickSrc;
}
function imgOnError()
{
this.style.display = 'none';
}
function setLinks(firstNum)
{
var n = document.getElementById('galNext');
if (firstNum + imgsPerPg < imgsMax) {
n.href = 'gallery.html?n=' + (firstNum + imgsPerPg);
}
else {
n.style.visibility = 'hidden';
}
var p = document.getElementById('galPrev');
if (firstNum > imgsPerPg) {
p.href = 'gallery.html?n=' + (firstNum - imgsPerPg);
}
else {
p.style.visibility = 'hidden';
}
}
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function leadingZeros(num) {
if ( num < 10) return "00" + num;
else if ( (num > 9) && (num < 100) ) return "0" + num;
else if ( num > 99 ) return "" + num;
}
</script>
</head>
<body>
<h3>page title</h3>
<div>
<img id="001">
<img id="002">
<img id="003">
<img id="004">
<img id="005">
</div>
<div>
<img id="006">
<img id="007">
<img id="008">
<img id="009">
<img id="010">
</div>
<div>
<img id="011">
<img id="012">
<img id="013">
<img id="014">
<img id="015">
</div>
<div>
<img id="016">
<img id="017">
<img id="018">
<img id="019">
<img id="020">
</div>
<div>
<a id="galPrev" href=""><< Previous 20</a>
<a id="galNext" href="">Next 20 >></a>
</div>
</body>
</html>
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Slide</title>
<style>
.singleSlide {text-align: center}
.slideControls {text-align: center}
</style>
<script type="text/javascript">
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
var imgsPerPg = 1;
var imgsMax = 34;
function winOnLoad()
{
if (document.getElementById) {
var n = 1, a = xGetURLArguments();
if (a.length) {
n = parseInt(a[0]);
if (n <= 0 || n > imgsMax) {
n = 1;
}
}
setImages(n);
setLinks(n);
}
}
function setImages(firstNum)
{
var i, img, id, src;
for (i = 0; i < imgsPerPg; ++i) {
id = leadingZeros(i+1);
img = document.getElementById(id);
src = 'images/' + leadingZeros(firstNum + i);
img.alt = img.src = src + '.jpg'; // img to load now
}
}
function setLinks(firstNum)
{
var n = document.getElementById('slideNext');
if (firstNum + imgsPerPg < imgsMax) {
n.href = 'slide.html?pid=' + leadingZeros(firstNum + imgsPerPg);
}
else {
n.style.visibility = 'hidden';
}
var p = document.getElementById('slidePrev');
if (firstNum > imgsPerPg) {
p.href = 'slide.html?pid=' + leadingZeros(firstNum - imgsPerPg);
}
else {
p.style.visibility = 'hidden';
}
}
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = location.href.substring(idx+1, location.href.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[i] = nameVal[1];
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
function leadingZeros(num) {
if ( num < 10) return "00" + num;
else if ( (num > 9) && (num < 100) ) return "0" + num;
else if ( num > 99 ) return "" + num;
}
</script>
</head>
<body>
<div class="singleSlide">
<img id="001">
</div>
<div class="slideControls">
<a id="slidePrev" href=""><< Previous</a>
<a id="slideNext" href="">Next >></a>
</div>
</body>
</html>
...seems to work but for some reason it only works properly for the first 7 images in the gallery. then it resets to 001... any suggestions would be GREATLY appreciated! I m so close - just some little bug i guess but i dont know enough about your script to figure it out without another set of javascript guru eyes.. ...a live example - same thing as code above just in action with pictures.. THANKS FOR YOUR PATIENCE MIKE!!!!!!!!!!!!!!!!!!! |
|
|
|
|
|
Jan 25, 2005, 07:19
|
#7 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Hey that's pretty slick! It's the first time I've seen it work with images. Adding the slide page was a great idea - it really needs that.
I didn't see any problem, I was able to navigate among all 34 images. Very cool I wish I was on one of those sailboats right now  |
|
|
|
|
Jan 25, 2005, 08:11
|
#8 | |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
Quote:
hehe thanks - i think it is a pretty cool addition also but if you look closer you will notice that after the 7th image, the pictures that you click do not match up to the picture that shows up.. this is a good example.. http://hellfire.dusers.drexel.edu/~dusail/NewSite/pictures/OCCFall04/slide.html?pid=008 as you can see, i am loading a photo id of 008 into the URL. But when you hold the mouse over the image that actually loads, the alt text reads "images/001.jpg" and not coincidentaly displays the 001.jpg image I first noticed this when I clicked the 20th image on the first gallery page ( http://hellfire.dusers.drexel.edu/~d...4/gallery.html ) - the thumbnail accurately shows people standing on a dock but when you click it, the image that shows up in the slide, is 3 boats sailing in the bay - not people standing on a dock. Also when you advance forward in the slide view, it hits 001 when it should hit 008 and the controls that should be available for 008 are now limited to the previous link; exactly like the 001 slide should have. Do you see my dilema? it is quite bizarre why it would do this only after every 7.. Hope you can help! I appreciate everything to this point, I really do! Thanks again! |
|
|
|
|
|
Jan 25, 2005, 09:08
|
#9 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Ok, I see the problem now in IE. Opera was not showing a problem - but it should have. IE was properly returning a 1 for parseInt('008') because the leading zero indicates 'octal'.
Add a 'radix' argument to the parseInt() calls in both gallery and slide files: Code:
n = parseInt(a[0], 10); Code:
img.onClickSrc = 'img_viewer.html?pid=' + leadingZeros(firstNum + i); // img to load onclick Code:
img.onClickSrc = 'img_viewer.html?pid=' + (firstNum + i); // img to load onclick Great work! |
|
|
|
|
Jan 25, 2005, 09:25
|
#10 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Oh, btw...
This... Code:
window.onload = function()
{
if (window.winOnLoad) window.winOnLoad();
}
|
|
|
|
|
Jan 26, 2005, 06:33
|
#11 |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
Excellent!
Tis coming together really well, Mike, THANKS AGAIN! ROCK ON! I noticed that on your site you were working on a back to gallery link and read yoru blurb about consolidating them into 1 script.. Sounds awesome - I ll check keep checking in to see how you go with this.. Thanks again man - I like this script alot and really appreciate you taking the time to help me refine it  Dan |
|
|
|
|
Jan 26, 2005, 06:41
|
#12 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
You're very welcome
I've enjoyed us working together on this. We've really improved the demo - and it has even more potential now.Did you notice that the back to gallery link takes you back to the gallery page which contains the thumbnail for the current large pic? Have a great day
Edit: btw... I've moved the demo out of the X Examples section because it doesn't use the X library. It is here now. Last edited by MikeFoster; Jan 26, 2005 at 07:13.. |
|
|
|
|
Jan 26, 2005, 09:56
|
#13 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
I combined the two scripts into one. Still needs some work, but it's shaping up nicely
|
|
|
|
|
Jan 26, 2005, 10:49
|
#14 |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
yes i did notice that as a matter of fact! excellent
only thing i noticed (totally not a big deal) is that if you click an image on the second page (and probably others after one) it takes you to the proper slide but then when you click go bakc to gallery it takes you almost back to the same gallery...the first and last slides are different so if you are in the gallery page 1 and it has thumbnails 1-20, you click next and view thumbnails 21-40, you click image 28 for example, slide 28 comes up all is good to this point. you click return to gallery, you are now viewing thumbnails 20-39 vs 21-40 like i said not really a big deal just somethign i caught.. probably something very small and simplerock on! |
|
|
|
|
Jan 26, 2005, 11:37
|
#15 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Ah! Good catch, I missed that
I think I've fixed it. |
|
|
|
|
Jan 28, 2005, 20:43
|
#16 |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
wow mike this is really great..
I m convinced that this is perhaps the best javascript based gallery mechanism out there. serisously. Thought of something else..  ...what about adding an auto advance slideshow type option?I have seen some other javascripts that you click play and just rotate through a bunch of pics on arrays and all kinds of nonsense...but it seems like it wouldnt be to tough to add a settimeout(function, 3000) to your script that would trigger the next link (according to how long you set the timeout to be obviously) the problem is i dont understand which function to plug in there.. also would we have to load another var into the url since it basically reloads the page everytime? like img_gallery.html?s=004&auto=true in order to tell it to repeat the cycle? if i understand it correctly, this thing would only timeout once before it went to the next page. and then since the default bahaviour for the single slide would be auto=false, if we want it to continue the slide show we would have to override the default with a auto=true via URL and capture it.. ...i think... i found something very simple here...(for some reason it doesnt work in firefox - only works in IE...grrrrrrr) Code:
<html>
<head>
<script language="javascript">
<!--
var count = 0;
var running = true;
function doRewrite() {
if (running) {
count++;
div1.innerHTML='timer itself has timeout for the <b>' + count + '</b><sup>th</sup>
time.';
status='Timer has run for ' + count + ' time(s)';
setTimeout("doRewrite()", 1000);
}
}
function StopStartTimer() {
if (running) {
running=false;
status='Timer stopped';
link1.innerText='Start Timer';
}
else {
running=true;
status='Timer started';
link1.innerText='Stop Timer';
setTimeout("doRewrite()", 1000);
}
}
// -->
</script>
</head>
<body onload="setTimeout('doRewrite()', 1000)">
<!-- Placeholder for dynamic text -->
<div id="div1">
</div>
<p><!-- Hyperlink to stop/start the timer -->
<a href="javascript:void(0)" name=link1 onclick='StopStartTimer()'>Stop Timer</a>
</body>
</html>
any thoughts on how to accomplish this? or how to make it cross-browser functional? ROCK ON!! dan |
|
|
|
|
Jan 30, 2005, 06:22
|
#17 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Hi Dan, sorry I haven't replied yet. You posted some great ideas again. I experimented with a version 2 of the gallery. See what you think
Your post made me realize that we don't need to reload the page at all - just change the src of the images. This made implementing auto-slide easier. Version 2 has some really ugly code right now. But I'll be cleaning it up. The next step is to turn it into an 'object' - then the next step will be to integrate it with a server-side script so it works even when js is disabled |
|
|
|
|
Jan 30, 2005, 07:43
|
#18 | |
|
SitePoint Member
Join Date: Oct 2003
Location: West Chester, PA
Posts: 13
|
Quote:
hey no worries I dunno if i ll have much use for a server side version - i was on a search for a javascript on becasue hte host that this particular gallery is going on doesnt support ANY serversides at all other wise i would have done it in php anyway  thats a pretty cool mechanism - i was actually kinda hoping to see if it could be done through passing it into URLs so that you could send a link to someone for a specific image...but you may be right, this might be a better way to do it...(would it be that much harder to pass the advancement to the URL than straight to the image? just curious...i ll play around a little) again you have outdone yourself rock on |
|
|
|
|
|
Jan 30, 2005, 20:18
|
#19 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Thanks
The url arguments still work, just as in version 1, for example: Slideshow page, slide #26: http://cross-browser.com/toys/img_gallery_2.php?s=26 Gallery page, start at #21: http://cross-browser.com/toys/img_gallery_2.php?g=21 |
|
|
|
|
Feb 1, 2005, 04:49
|
#20 |
|
SitePoint Member
Join Date: Feb 2005
Posts: 3
|
I found your script trough google and it's accactely doing what i whas looking for
 However some questions raised....; - How do you tell the script howmany pictures to show in total (your example shows 60 but i can not find where you point to it)? - Do you have expierience in using it in e107? Thanx al lot (sorry for my english; it's not my first language) |
|
|
|
|
Feb 1, 2005, 07:52
|
#21 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Hi jeronimo, Welcome to the forums!
Glad you like my little toy Are you looking at version 2? I just uploaded a few small changes. The code is really ugly right now - I'm hoping to get a chance to clean it up (and do an OO redesign) soon. I added a comment to denote which variables are user configurable: Code:
// user configurable: var imgsPerPg = 20; var imgsMax = 50; var tnWidth = 70, tnHeight = 70; // thumbnail size var tnSuffix = '_tn'; var imgExt = '.jpg'; var imgPath = 'images/'; // include trailing slash var slideTimeout = 3; // seconds before loading the next slide Sorry, this is the first time I've ever heared of e107. It's a CMS, is that right? Vic also has a great slideshow script. I think he'll be posting a link soon. The more the merrier!  |
|
|
|
|
Feb 1, 2005, 08:00
|
#22 |
|
SitePoint Member
Join Date: Feb 2005
Posts: 3
|
well first of all; e107 is something like phpnuke. A pre maid php website with a lot of plugins ( www.e107.org ; www.e107coders.org )
So if i am right; var imgsPerPg = 20; means 20 pictures on one page var imgsMax = 50; means max 50 pictures to show var imgPath = 'images/'; // inc... is the place where the pictures are hosted. This is relative to the page with the script? So in your example.... www.mysite.com/scriptpage.php and images www.mysite.com/images/ the dir of the photo's I will try some thing tonight and will let you now my results |
|
|
|
|
Feb 1, 2005, 08:00
|
#23 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Great! Let us know how it goes.
btw... I was surprised that Google had already spidered that page. Out of curiosity I googled javascript image gallery. Of course, there are many of them And it has already indexed this thread as well. |
|
|
|
|
Feb 1, 2005, 10:31
|
#24 |
|
SitePoint Member
Join Date: Feb 2005
Posts: 3
|
I think I will try to make a plugin for my site.
From the contral pannel of my site I will put text in the data base is well as the place where the pictures are stored and the number of pictures to show. The php page then reads the information stored in the database and the result should be that te page contains the text with the thums underneath. A thing that I would like to add to the script is an option to load the picture fullsize in a new window (600*800 or something). So then the scripts looks like thumb --click thumb -> bigger image -- click bigger image -> new window big image Thing is that the picture should be 3 times on the server or the big image must be resizable in the 2nd action. Things will take a wile from now on; I am not so known with PHP at the moment |
|
|
|
|
Apr 29, 2005, 15:32
|
#25 |
|
I'll take mine raw
Join Date: Dec 2002
Location: Alabama, USA
Posts: 2,562
|
Just an update. I added support for captions
|
|
|
|
|
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
Linear Mode
|
|
|
All times are GMT -7. The time now is 06:15.