Mini dynamic "gallery"

@ivanparasJan 11.2009

I’m totally new to JS but not to programming.

What I’m building right now is a web page that makes videos for local business and also hosts them on my site.

For each business I would like to have 2-5 images that can be clicked on to cause a pop-up of the full-sized image to appear, and have that pop-up close when you click on the image.

Now I know I could go through and program this for each business’s sub-page, but I was hoping there would be some way I could have one script that runs and changes based on each site because I have about 30 business that all need pop-up galleries.

I have a flowchart in mind and I was wondering if this is possible in JS:
1. User goes to business’s page
2. User clicks on thumb_image01.jpg thumbnail
3. JS creates a pop-up based off of the image’s name
a. I don’t know if this is possible in JS. It would need to create a page (not link to a page) based off of the thumbnail’s name to connect it to the full-sized version of the image (something like thumb_image01.jpg versus full_image01.jpg)
4. Close the pop-up window when the user clicks on the image or a “Close this Window” link

In short, I am wondering if it is possible to create reusable code that is dynamic in that I can stick the thumbnail image on the page and have JS find the full image based on the name and then display it in a pop-up.

to post a comment

JavaScript

3 Comments(s) _↴

@MrNobodyJan 12.2009 — #Untested, but you should be able to get this to work for you:

[code=html]<script type="text/javascript">
 <!-- //
 var smallPrefix = "thumb_";
 var largePrefix = "full_";
 //
 function OpenViewer(img)
 {
 var ptr = window.open('', 'MyViewer', 'width=800,height=600,resizable,scrollbars');
 img.blur();
 var html, path = img.src.getFilePath(), file = img.src.getFileName();
 html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"n';
 html += '                      "http://www.w3.org/TR/html4/loose.dtd">n';
 html += '<html>n';
 html += '<head>n';
 html += '<meta http-equiv="Content-Language" content="en-us">n';
 html += '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">n';
 html += '<title>My Viewer</title>n';
 html += '</head>n';
 html += '<body>n';
 html += '<img src="'+path+largePrefix+(file.substr(smallPrefix.length+1))+'"n';
 html += ' border="0" onclick="top.close();return true;">n';
 html += '</body>n';
 html += '</html>n';
 ptr.document.open();
 ptr.document.write(html);
 ptr.document.close();
 return false;
 }
 function SetupViewer(sel)
 {
 var img = document.images;
 var x, len = img.length;
 for (x=0; x<len; ++x)
 {
 if (img[x].src.getFileName().substr(0,sel.length) == sel)
 {
 img[x].onclick = function()
 {
 return OpenFull(this);
 }
 }
 }
 return true;
 }
 String.prototype.getFileName = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,pos-1);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(pos+1);
 return url;
 }
 String.prototype.getFilePath = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,pos-1);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(0,pos);
 return url;
 }
 window.onload = function()
 {
 return SetupViewer(smallPrefix);
 }
 // -->
 </script>[/code]

@ivanparasauthorJan 12.2009 — #Thank you so much Mr. N!

With a few tweaks I got the code working great. After I took a crash course on JS syntax, I learned the logic of the code and got it working. There were a few function calls that were out of place and a few URL and file path slashes missing, but with some debugging I sniffed them out.

Here is the final code (I put the stuff I changed in [B]bold[/B]):

[CODE]<script type="text/javascript">
 <!-- //
 var smallPrefix = "thumb_";
 var largePrefix = "full_";
 //
 function OpenViewer(img)
 {
 var ptr = window.open('', 'MyViewer', 'width=1024,height=769,resizable=false,scrollbars=false');
 img.blur();
 var html, path = img.src.getFilePath(), file = img.src.getFileName();
 html += '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"n';
 html += '                      "http://www.w3.org/TR/html4/loose.dtd">n';
 html += '<html>n';
 html += '<head>n';
 html += '<meta http-equiv="Content-Language" content="en-us">n';
 html += '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">n';
 html += '<title>My Viewer</title>n';
 html += '</head>n';
 html += '<body>n';
 html += '<img src="'+path[B]+'/'[/B]+largePrefix+(file.substr(smallPrefix.[B]length))[/B]+'"n';
 html += ' border="0" onclick="top.close();return true;">n';
 html += '</body>n';
 html += '</html>n';
 ptr.document.open();
 ptr.document.write(html);
 ptr.document.close();
 return false;
 }
 function SetupViewer(sel)
 {
 var img = document.images;
 var x, len = img.length;
 for (x=0; x<len; ++x)
 {
 if (img[x].src.getFileName().substr(0,sel.length) == sel)
 {
 img[x].onclick = function()
 {
 return [B]OpenViewer[/B](this);
 }
 }
 }
 return true;
 }
 
 String.prototype.getFileName = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,pos-1);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(pos+1);
 return url;
 }
 
 String.prototype.getFilePath = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,pos-1);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(0,pos);
 return url;
 }
 window.onload = function()
 {
 return SetupViewer(smallPrefix);
 }
 
 // -->
 </script>[/CODE]

The only problem I have is that on the pop-up window the word "undefined" appears at the top of the image. I'm not sure where that's coming from.

Also, the full image and the thumbnail are different file types (full is .jpg, thumb is .png). Because of this, the full image doesn't show. Is there anyway around this?

@MrNobodyJan 12.2009 — #Make these two corrections to account for the fact that you had to add a slash into the code.

[CODE]String.prototype.getFilePath = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,[COLOR="Red"]pos[/COLOR]);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(0,[COLOR="Red"]pos+1[/COLOR]);
 return url;
 }[/CODE]

To handle the different file extensions, you just have to parse out the file extension from the [B]file[/B] variable in the code and add the new extension.

Oh, and correct the other function, too:

[CODE]String.prototype.getFileName = function()
 {
 var pos, url = this.toString();
 if (0 <= (pos = url.indexOf("?")))
 url = url.substr(0,[COLOR="Red"]pos[/COLOR]);
 if (0 <= (pos = url.lastIndexOf("/")))
 url = url.substr(pos+1);
 return url;
 }[/CODE]

Also in #JavaScript _↴

Making a picture gallery open in a new window Safari/jscript - iframe problems jQuery plugin for custom forms

Success!

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

Tweet This

Mini dynamic "gallery"

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Mini dynamic "gallery"

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴