...

View Full Version : Tab Gallery onclick event



jmrker
09-03-2011, 03:57 AM
I was trying to help someone on another forum and seem to have run into a brick wall. :eek:

The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine.
However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all).
Perhaps some other more experienced forum members can identify what I doing wrong at this time. :confused:

I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet!


var sel, tmp, elem;
var j=0;
for (var i=0; i<imgGroupArray.length; ++i) {
sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
}


Here is the full code that 'almost' works:


<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg'] // NOTE: No comma after last entry
];

function tabGroup(which) {
var sel = document.getElementById('imgGroup').getElementsByTagName('div');
for (var i=0; i<sel.length; ++i) {
sel[i].style.display = 'none';
}
var tmp = 'imgGroup'+which; // alert(tmp);
document.getElementById(tmp).style.display = 'block';
}

function setBigImage(info) { // alert(info);
document.getElementById('bigImage').src = info;
}
window.onload = function() {
var img;
for (var i=0; i<imgGroupArray.length; ++i) {
for (var j=0; j<imgGroupArray[i].length; ++j) {
img = document.createElement('img');
img.setAttribute('src', baseURL+imgGroupArray[i][j]);
img.setAttribute('height','100px');
img.setAttribute('width','75px');
document.getElementById('imgGroup'+i).appendChild(img);
}
}

// Following modified from:
// http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
var sel, tmp, elem;
var j=0;
for (var i=0; i<imgGroupArray.length; ++i) {
sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
}

tabGroup(0);
}

</script>

</head>
<body>
<div id="tabMenu">
<div style="float:left">
<li onclick="tabGroup(0)">Tab 1</li>
<li onclick="tabGroup(1)">Tab 2</li>
<li onclick="tabGroup(2)">Tab 3</li>
<li onclick="tabGroup(3)">Tab 4</li>
<li onclick="tabGroup(4)">Tab 5</li>
<li onclick="tabGroup(5)">Tab 6</li>
</div><br>
<div id="imgGroup"
style="width:300px; height:300px; border:1px solid red; float:left">
<div id="imgGroup0" class="imgBlock"></div>
<div id="imgGroup1" class="imgBlock"></div>
<div id="imgGroup2" class="imgBlock"></div>
<div id="imgGroup3" class="imgBlock"></div>
<div id="imgGroup4" class="imgBlock"></div>
<div id="imgGroup5" class="imgBlock"></div>
</div>
<div id="bigImageDiv"
style="width:250px; height:300px; border:1px solid red; float:left;">
<img id="bigImage" src="" alt="bigImage here!">
</div>
<br style="clear:both">
</div>
</body>
</html>

vwphillips
09-03-2011, 09:34 AM
<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg'] // NOTE: No comma after last entry
];

function tabGroup(which) {
var sel = document.getElementById('imgGroup').getElementsByTagName('div');
for (var i=0; i<sel.length; ++i) {
sel[i].style.display = 'none';
}
var tmp = 'imgGroup'+which; // alert(tmp);
document.getElementById(tmp).style.display = 'block';
}

function setBigImage(info) { // alert(info);
document.getElementById('bigImage').src = info;
}
window.onload = function() {
var img;
for (var i=0; i<imgGroupArray.length; ++i) {
for (var j=0; j<imgGroupArray[i].length; ++j) {
img = document.createElement('img');
img.setAttribute('src', baseURL+imgGroupArray[i][j]);
img.setAttribute('height','100px');
img.setAttribute('width','75px');
document.getElementById('imgGroup'+i).appendChild(img);
img.onclick = function() { setBigImage(this.src); }
}
}


tabGroup(0);
}

</script>

</head>
<body>
<div id="tabMenu">
<div style="float:left">
<li onclick="tabGroup(0)">Tab 1</li>
<li onclick="tabGroup(1)">Tab 2</li>
<li onclick="tabGroup(2)">Tab 3</li>
<li onclick="tabGroup(3)">Tab 4</li>
<li onclick="tabGroup(4)">Tab 5</li>
<li onclick="tabGroup(5)">Tab 6</li>
</div><br>
<div id="imgGroup"
style="width:300px; height:300px; border:1px solid red; float:left">
<div id="imgGroup0" class="imgBlock"></div>
<div id="imgGroup1" class="imgBlock"></div>
<div id="imgGroup2" class="imgBlock"></div>
<div id="imgGroup3" class="imgBlock"></div>
<div id="imgGroup4" class="imgBlock"></div>
<div id="imgGroup5" class="imgBlock"></div>
</div>
<div id="bigImageDiv"
style="width:250px; height:300px; border:1px solid red; float:left;">
<img id="bigImage" src="" alt="bigImage here!">
</div>
<br style="clear:both">
</div>
</body>
</html>

jmrker
09-04-2011, 01:39 AM
Thank you Vic.

Seems like such a small change but it sure made a big difference.
I thought I had tried a variation of that, but your's, unlike my efforts, does work!

TiK
09-04-2011, 06:36 AM
Hi. Great code!! This code is perfect for what I'd like do with my portfolio site! Is it possible to have an image populate the image box when you first click on any tab? Thanks in advance. TiK

vwphillips
09-04-2011, 08:54 AM
I have this Draft

http://www.vicsjavascripts.org.uk/TabSlideShow/110903B.htm

jmrker
09-04-2011, 01:47 PM
Hi. Great code!! This code is perfect for what I'd like do with my portfolio site! Is it possible to have an image populate the image box when you first click on any tab? Thanks in advance. TiK

Vic has a nicer presentation with all the CSS goodies,
but if you just need the quick and dirty method,
just add the following to the last line of the
"tabgroup(which)" function



document.getElementById('bigImage').src = baseURL+imgGroupArray[which][0];


This makes the bigImage show as the first image
of any tab group change.
:thumbsup:

TiK
09-04-2011, 05:30 PM
Thank you both for your recommendations!! Thank you so much Vic, I like the addition of the arrows to move back and forward between the images in the tabs! That's exactly what I'm trying to do! The images seem to be jangling around a bit thou. I don't necessarily need the images to move forward automatically. Is there a way to go back to your original code, add jmrker's fix, then add functionality to move back and forward between the images in each array using the arrows? Thank you again in advance!! TiK

vwphillips
09-05-2011, 10:11 AM
I hope J.Marker does not mind


<!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>

<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg'] // NOTE: No comma after last entry
];

function tabGroup(which) {
var sel = document.getElementById('imgGroup').getElementsByTagName('div');
for (var i=0; i<sel.length; ++i) {
sel[i].style.display = 'none';
}
var tmp = document.getElementById('imgGroup'+which); // alert(tmp);
tmp.style.display = 'block';
Step.imgs=tmp.getElementsByTagName('IMG');
Step.cnt=0;
document.getElementById('bigImage').src = baseURL+imgGroupArray[which][0];
}

function Step(ud) {
var imgs=Step.imgs,lgth=imgs.length-1,ud=typeof(ud)=='number'&&ud<0?-1:1,cnt=Step.cnt,cnt=cnt+ud,cnt=cnt<0?lgth:cnt>lgth?0:cnt;
document.getElementById('bigImage').src = imgs[cnt].src;
Step.cnt=cnt;
}

function setBigImage(info) { // alert(info);
document.getElementById('bigImage').src = info;
}
window.onload = function() {
var img;
for (var i=0; i<imgGroupArray.length; ++i) {
for (var j=0; j<imgGroupArray[i].length; ++j) {
img = document.createElement('img');
img.setAttribute('src', baseURL+imgGroupArray[i][j]);
img.setAttribute('height','100px');
img.setAttribute('width','75px');
document.getElementById('imgGroup'+i).appendChild(img);
img.onclick = function() { setBigImage(this.src); }
}
}


tabGroup(0);
}

</script>

</head>
<body>

<input type="button" name="" value="Forward" onmouseup="Step(1);" />
<input type="button" name="" value="Back" onmouseup="Step(-1);" />
<div id="tabMenu">
<div style="float:left">
<li onclick="tabGroup(0)">Tab 1</li>
<li onclick="tabGroup(1)">Tab 2</li>
<li onclick="tabGroup(2)">Tab 3</li>
<li onclick="tabGroup(3)">Tab 4</li>
<li onclick="tabGroup(4)">Tab 5</li>
<li onclick="tabGroup(5)">Tab 6</li>
</div><br>
<div id="imgGroup"
style="width:300px; height:300px; border:1px solid red; float:left">
<div id="imgGroup0" class="imgBlock"></div>
<div id="imgGroup1" class="imgBlock"></div>
<div id="imgGroup2" class="imgBlock"></div>
<div id="imgGroup3" class="imgBlock"></div>
<div id="imgGroup4" class="imgBlock"></div>
<div id="imgGroup5" class="imgBlock"></div>
</div>
<div id="bigImageDiv"
style="width:250px; height:300px; border:1px solid red; float:left;">
<img id="bigImage" src="" alt="bigImage here!">
</div>
<br style="clear:both">
</div>
</body>
</html>

jmrker
09-05-2011, 02:53 PM
I hope J.Marker does not mind


...

Not in the least! :D
The more help the merrier. :thumbsup:

TiK
09-08-2011, 06:24 PM
Thank you both!!

Here's what it looks like: Rawopulence.com.
I've noticed a small issue with Firefox. The popup windows are opening about 20 pixels to the right of center...I'm guessing this problem is in the csspopup2.js file. The tab categories seem to be loading a bit slowly too--but that could just be my computer. If you have any suggestions, I'd appreciate it. :)

jmrker
09-08-2011, 10:40 PM
Thank you both!!

Here's what it looks like: Rawopulence.com.
I've noticed a small issue with Firefox. The popup windows are opening about 20 pixels to the right of center...I'm guessing this problem is in the csspopup2.js file. The tab categories seem to be loading a bit slowly too--but that could just be my computer. If you have any suggestions, I'd appreciate it. :)

I don't see the tab gallery code at that site. Did you type it right? :confused:

TiK
09-14-2011, 05:46 PM
Hi Jmrker,

The tabs are there--just on the bottom. Just solved the centering issue! Thank you for your help!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum