Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Gallery Code Questions
Abmonk (Guild Admin) 5/18/2009 11:20 AM EST : Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

Hello Mottie,

I've been experimenting with the gallery code

In the code I see the nxtImg function: -

function nxtImg(){
picture++;
if (picture >= myimages.length) picture = 0;
slide.src = myimages(picture);
showing();
}

I've added a mycatdesc.push to each picture, and now I'm trying to add a function nxtcat

function nextcat(){
var currentcat = picture;

add 1 to picture until mycatdesc(picture) is not = mycatdesc(currentcat)

if (picture >= myimages.length) picture = 0;
slide.src = myimages(picture);
showing();
}


So now I need your help Mottie please, in converting the add line to proper coding.

Thanks,
Abmonk 
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Mottie (MVP) 5/18/2009 6:54 PM EST : RE: Gallery Code Questions
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Abmonk!

I was looking into your request, but I haven't had much time to mess around with it. The problem with adding a category would be you can't use the total length of all the images, you need to make a length for each category. I was working on that when I ran out of time

Give me a few more days so I can clean it up and refine it, then I'll post it for you 
TopBottom

Abmonk (Guild Admin) 5/18/2009 8:30 PM EST : RE: Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

Cool thanks Mottie,

I've just gone into my coding to change something and now it's much worse than before - so I think I better stop!

Ah a length of how many pictures in each category. I was thinking as long as the pictures are in order you would just compare the category of the current picture with the category of the next or prev one, and loop through the pictures until the category changed.

It will be interesting to study your code when you've posted it to try and learn how it's done.
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Mottie (MVP) 5/19/2009 2:56 AM EST : RE: Gallery Code Questions
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Abmonk!

I had to just make each album have it's own array. If you use one array and had unsorted albums in the array it would make the coding that much more difficult with sorting, etc. So I opted for this route and it seems to have worked out pretty well.

Check it out here.
TopBottom

Abmonk (Guild Admin) 5/21/2009 1:58 PM EST : RE: Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

Hello Mottie,

Your too clever lol, its great. I've added some pictures, but still more to put on.

Unfortunately I tried to be clever and change the one bit - so of course I messed it up.

Your code says: -

*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 border=0 align=center><tbody>
<tr>
 <td align="center" id="albumbx">
  <a id="pAlb" onclick="prevAlb()" title="Previous Album"></a>
  <span id="tAlb"></span>
  <a id="nAlb" onclick="nxtAlb()" title="Next Album"></a></td>
</tr>
<tr>
 <td colspan=3><img id="pic" onclick="openImg()" border="0"></td>
</tr>
<tr>
 <td colspan=3>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>


I wanted to make a gap between the album controls and the album name, so I changed the code to be: -

*****************************
 DON'T change anything below
***************************** -->
<table id=viewer border=0 cellSpacing=0 cellPadding=0 align=center>
<tbody>
<tr>
<td>
<table id=albumx border=0 width="100%">
<tbody>
<tr>
<td align=middle><a id=pAlb title="Previous Album" onclick=prevAlb()></a></td>
<td align=middle><span id=tAlb></span></td>
<td align=middle><a id=nAlb title="Next Album" onclick=nxtAlb()></a></td></tr></tbody></table></td></tr>
<tr><img id=pic onclick=openImg() border=0></td></tr>
<tr>
<td>
<table id=controls border=0 width="100%">
<tbody>
<tr>
<td align=middle><a id=sImg title="First image" onclick=start()></a></td>
<td align=middle><a id=pImg title="Previous image" onclick=prev()></a></td>



Well i got a gap!
But I can't understand why now my album name and controls is below the picture. Also the background and pointer is no longer right just in that bit.

I haven't changed the #albumx bit of code that has the background and pointer code in.

Please can you try and spot my mistake. If you need to see how my gallery looks - see my gallery 

Thanks.
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Mottie (MVP) 5/21/2009 2:16 PM EST : RE: Gallery Code Questions
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Admonk!

Sorry, I didn't want to troubleshoot the problem with your code, so I changed the original a bit to spread out the album controls... Here is the HTML portion of the script:
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 border=0 align=center><tbody>
<tr>
 <td align="center">
  <table id="albumbx" border=0 width="100%"><tr>
   <td width="10"><a id="pAlb" onclick="prevAlb()" title="Previous Album"></a></td>
   <td align="center"><div id="tAlb"></div></td>
   <td width="10"><a id="nAlb" onclick="nxtAlb()" title="Next Album"></a></td>
  </tr></table>
 </td>
</tr>
<tr>
 <td><img id="pic" onclick="openImg()" border="0"></td>
</tr>
<tr>
 <td>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>
    <td align="center"><a id="pImg" onclick="prev()" title="Previous image"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()" title="Start/Stop Slideshow"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()" title="Next image"></a></td>
    <td align="center"><a id="lImg" onclick="end()" title="Last image"></a></td>
    <td align="center"><div id="currNumber"></div></td>
    <td align="center" id="rImgBx" width=album:2><a id="rImg" onclick="rndImgToggle()" title="Toggle random image slide show"></a></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
</tbody></table>
TopBottom

Abmonk (Guild Admin) 5/29/2009 3:01 PM EST : RE: Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

Thanks Mottie,

My new gallery is now complete - Kinship Alliance Gallery
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Mottie (MVP) 5/29/2009 3:52 PM EST : RE: Gallery Code Questions
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Abmonk!

The album looks messed up to me... the text and images aren't centered.



also, I fixed the error in the code - I had to add two variables back into the script "rndImgOn" and "rndImgOff" which I set both to blank since it appears you didn't want a random image button. So here is the code I put together for you in total:
<script language=javascript>
// ************************************
// sildeShowSpeed is time in milliseconds (ms)
// 3000 ms = 3 seconds
// ************************************
var slideShowSpeed = 3000;
var runSlideShow = false;
var randomImageSlideShow = false;
var hideControls = false;
var hideDescription = false;

var album = 1; // starting album
var picture = 1; // starting picture

var width = 750;
var height = 550;

// ************************************
// add images for each control button as follows
// firstImg = '<img src="IMAGE URL">';
// ************************************

var firstImg = 'First';
var prevImg = 'Prev';
var playImg = 'Play';
var pauseImg = 'Pause';
var nextImg = 'Next';
var lastImg = 'Last';
var rndImgOn = '';
var rndImgOff = '';

// ************************************
// To add another album, add: var albumx = new Array(["ALBUM NAME"]); then add the new album to the myAlbums array
// To add more images, add: albumx.push (["THUMBNAIL URL","IMAGE URL","DESCRIPTION TEXT"]);
// Thumbnail will be resized to fit the viewer and the image will open in a facebox window
// ************************************
myAlbumsRoot = "http://i298.photobucket.com/albums/mm260/Abmonk/Everquest/";

var album1 = new Array(["Depths of Darkhollow"]);
album1.push (["DoD/Grokui.jpg","DoD/Grokui.jpg","Grokui, the Slumbering Basilisk"]);
album1.push (["DoD/Shyra.jpg","DoD/Shyra.jpg","Matriarch Shyra"]);
album1.push (["DoD/Verok.jpg","DoD/Verok.jpg","Ritesmaster Verok"]);

var album2 = new Array(["Dragons of Norrath"]);
album2.push (["DoN/Jurek.jpg","DoN/Jurek.jpg","Jurek the Corrupted"]);
album2.push (["DoN/YarLir.jpg","DoN/YarLir.jpg","Yar'Lir"]);

var album3 = new Array(["Epics"]);
album3.push (["Epics/BRD15-Hsagra.jpg","Epics/BRD15-Hsagra.jpg","Bard 1.5 - Hsagra"]);
album3.push (["Epics/BRD15-Vesthons.jpg","Epics/BRD15-Vesthons.jpg","Bard 1.5 - Vesthons"]);
album3.push (["Epics/Oshiruk.jpg","Epics/Oshiruk.jpg","Bard 2.0 - Oshiruk"]);
album3.push (["Epics/BazuSmasher.jpg","Epics/BazuSmasher.jpg","Berserker 2.0 - Bazu Smasher"]);
album3.push (["Epics/ZordakRagefire.jpg","Epics/ZordakRagefire.jpg","Cleric 2.0 - Zordak Ragefire"]);
album3.push (["Epics/DRU20-Gorlakt.jpg","Epics/DRU20-Gorlakt.jpg","Druid 2.0 - Gorlakt"]);
album3.push (["Epics/ValdoonKelNovar.jpg","Epics/ValdoonKelNovar.jpg","Paladin 2.0 - Valdoon Kel Novar"]);
album3.push (["Epics/RemaltheBlack.jpg","Epics/RemaltheBlack.jpg","Paladin 2.0 - Remal the Black"]);
album3.push (["Epics/HerrianWarfrost.jpg","Epics/HerrianWarfrost.jpg","Ranger 2.0 - Herrian Warfrost"]);
album3.push (["Epics/ROG20-PolarKraken.jpg","Epics/ROG20-PolarKraken.jpg","Rogue 2.0 - Polar Kraken"]);
album3.push (["Epics/ROG20-Myrhee.jpg","Epics/ROG20-Myrhee.jpg","Rogue 2.0 - Myrhee the Flighty"]);
album3.push (["Epics/WAR20.jpg","Epics/WAR20.jpg","Warrior 2.0 - Korbuk Brimblade"]);
album3.push (["Epics/Vhalek.jpg","Epics/Vhalek.jpg","Wizard 2.0 - Lightningcaller Vhalek"]);

var album4 = new Array(["Gates of Discord"]);
album4.push (["GoD/KeeperoftheAlter.jpg","GoD/KeeperoftheAlter.jpg","Keeper of the Alter"]);
album4.push (["GoD/Pixxt.jpg","GoD/Pixxt.jpg","Pixxt Suir Mindrider"]);

var album10 = new Array(["Kunark to Luclin"]);
album10.push (["Pre%20PoP/AtenHaRa.jpg","Pre%20PoP/AtenHaRa.jpg","Aten Ha Ra"]);
album10.push (["Pre%20PoP/Bristlebane.jpg","Pre%20PoP/Bristlebane.jpg","Bristlebane"]);
album10.push (["Pre%20PoP/ssraemp.jpg","Pre%20PoP/ssraemp.jpg","Emperor Ssraeshza"]);

var album5 = new Array(["Lost Dungeons of Norrath"]);
album5.push (["LDoN/HiddenVale.jpg","LDoN/HiddenVale.jpg","Hidden Vale of Deceit"]);
album5.push (["LDoN/Laskuth.jpg","LDoN/Laskuth.jpg","Laskuth the Colossus"]);
album5.push (["LDoN/Marrow.jpg","LDoN/Marrow.jpg","Marrow"]);
album5.push (["LDoN/Quint.jpg","LDoN/Quint.jpg","Quintessence of Sand"]);

var album6 = new Array(["Legacy of Ykesha"]);
album6.push (["LoY/captainkrasnok.jpg","LoY/captainkrasnok.jpg","Captain Krasnok"]);

var album7 = new Array(["Omans of War"]);
album7.push (["OoW/Chailak.jpg","OoW/Chailak.jpg","Chailak"]);
album7.push (["OoW/Feratha.jpg","OoW/Feratha.jpg","Feratha"]);
album7.push (["OoW/Gazz.jpg","OoW/Gazz.jpg","Gazz the Gargantuan"]);
album7.push (["OoW/Hanvar2.jpg","OoW/Hanvar2.jpg","Hanvar"]);
album7.push (["OoW/Jekisia.jpg","OoW/Jekisia.jpg","Jekisia"]);
album7.push (["OoW/QueenPyrilonis.jpg","OoW/QueenPyrilonis.jpg","Queen Pyrilonis"]);
album7.push (["OoW/Adaptation.jpg","OoW/Adaptation.jpg","Trial of Adaptation"]);
album7.push (["OoW/Ture.jpg","OoW/Ture.jpg","Ture"]);

var album8 = new Array(["Plains of Power"]);
album8.push (["PoP/bert.jpg","PoP/bert.jpg","Bertoxxulous"]);
album8.push (["PoP/Coirnav.jpg","PoP/Coirnav.jpg","Coirnav"]);
album8.push (["PoP/fenninro.jpg","PoP/fenninro.jpg","Fennin Ro"]);
album8.push (["PoP/realrz.jpg","PoP/realrz.jpg","Rallos Zek"]);
album8.push (["PoP/solro.jpg","PoP/solro.jpg","Solusek Ro"]);
album8.push (["PoP/terristhule.jpg","PoP/terristhule.jpg","Terris Thule"]);
album8.push (["PoP/Xegony.jpg","PoP/Xegony.jpg","Xegony"]);

var album9 = new Array(["Prophecy of Ro"]);
album9.push (["PoR/Aryer.jpg","PoR/Aryer.jpg","Aryer the Warlord"]);
album9.push (["PoR/Ashenback.jpg","PoR/Ashenback.jpg","Ashenback"]);
album9.push (["PoR/Bartol.jpg","PoR/Bartol.jpg","Bartol the Cragmaker"]);
album9.push (["PoR/Ragewind.jpg","PoR/Ragewind.jpg","Ragewind"]);
album9.push (["PoR/Titanothon.jpg","PoR/Titanothon.jpg","Titanothon"]);
album9.push (["PoR/Trolgar.jpg","PoR/Trolgar.jpg","Trolgar the Tremendous"]);
album9.push (["PoR/Zomm.jpg","PoR/Zomm.jpg","Zomm the Seventh Born"]);

var album11 = new Array(["The Serpent's Spine"]);
album11.push (["TSS/ChiefUrgak.jpg","TSS/ChiefUrgak.jpg","Chief Urgak"]);
album11.push (["TSS/CordaganBoulderfist.jpg","TSS/CordaganBoulderfist.jpg","Cordagan Boulderfist"]);
album11.push (["TSS/Fiddleback.jpg","TSS/Fiddleback.jpg","Fiddleback"]);
album11.push (["TSS/Grenrik.jpg","TSS/Grenrik.jpg","Grenrik the Addled"]);
album11.push (["TSS/Mistwalker.jpg","TSS/Mistwalker.jpg","Mistwalker"]);
album11.push (["TSS/Oblivion.jpg","TSS/Oblivion.jpg","Oblivion"]);

var album99 = new Array(["Various Other Pictures"]);
album99.push (["Members/raidersdec07.jpg","Members/raidersdec07.jpg","December 2007"]);
album99.push (["Members/Hanvar.jpg","Members/Hanvar.jpg","March 2009"]);

var myAlbums = new Array(album1, album2, album3, album4, album10, album5, album6, album7, album8, album9, album11, album99);
</script>

<style type=text/css>
#viewer {
 border: #444444 2px solid;
 color: #ffffff;
 font-size:80%;
 font-family: verdana,arial;
 padding: 0px;
}
#pic {
 cursor: pointer;
}
#controls {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 cursor: pointer;
}
#albumbx {
 background: #222222 url();
 border-top: #444444 2px solid;
 color: #ffffff;
 font-size:110%;
 font-family: verdana;
 padding: 0px 5px;
 cursor: pointer;
}
#sImg, #pImg, #tShow, #nImg, #lImg, #currNumber, #pAlb, #nAlb {
 font-size:90%;
 font-family: arial;
}
#description {
 background: #222222 url();
 color: #ffffff;
 border-top: #444444 2px solid;
 font-size:110%;
 font-family: verdana;
 padding: 2px 0px 2px 0px;
}
#rImg { display:block; }
</style>
<!--
*****************************
 DON'T change anything below
***************************** -->
<table id="viewer" cellspacing=0 cellpadding=0 border=0 align=center><tbody>
<tr>
 <td><img id="pic" onclick="openImg()" border="0"></td>
</tr>
<tr>
 <td align="center" id="description" wrap></td>
</tr>
<tr>
 <td>
  <table id="controls" border=0 width="100%">
  <tbody><tr>
    <td align="center"><a id="sImg" onclick="start()" title="First image"></a></td>
    <td align="center"><a id="pImg" onclick="prev()" title="Previous image"></a></td>
    <td align="center"><a id="tShow" onclick="toggleShow()" title="Start/Stop Slideshow"></a></td>
    <td align="center"><a id="nImg" onclick="nxtImg()" title="Next image"></a></td>
    <td align="center"><a id="lImg" onclick="end()" title="Last image"></a></td>
    <td align="center"><div id="currNumber"></div></td>
    <td align="center" id="rImgBx" width=album:2><a id="rImg" onclick="rndImgToggle()" title="Toggle random image slide show"></a></td>
   </tr></tbody>
  </table>
 </td>
</tr>
<tr>
 <td align="center">
  <table id="albumbx" border=0 width="100%"><tr>
   <td width="10"><a id="pAlb" onclick="prevAlb()" title="Previous Album"></a></td>
   <td align="center"><div id="tAlb"></div></td>
   <td width="10"><a id="nAlb" onclick="nxtAlb()" title="Next Album"></a></td>
  </tr></table>
 </td>
</tr>
</tbody></table>
<script language="javascript">
var c = myAlbums[album-1];
$(document).ready(function(){vwrsetup()})
function vwrsetup() {
 $('#pAlb').html(prevImg);
 $('#tAlb').html(c[0][0]);
 $('#nAlb').html(nextImg);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]).attr("width",width).attr("height",height);
 $('#sImg').html(firstImg);
 $('#pImg').html(prevImg);
 $('#nImg').html(nextImg);
 $('#lImg').html(lastImg);
 $('#description').attr("width",width);
 if (hideControls) $('#controls').css("display","none");
 if (hideDescription) $('#description').css("display","none");
 showing();
 changeButton();
 rndImgChange();
}
function prevAlb(){
 album--
 if(album < 1) album = myAlbums.length;
 c = myAlbums[album-1];
 picture = 1;
 $('#tAlb').html(c[0][0]);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function nxtAlb(){
 album++;
 if(album > myAlbums.length) album = 1;
 c = myAlbums[album-1];
 picture = 1;
 $('#tAlb').html(c[0][0]);
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function prev(){
 picture--
 if(picture < 1) picture=c.length-1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function nxtImg(){
 picture++;
 if(picture >= c.length) picture = 1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function start(){
 $('#pic').attr("src",myAlbumsRoot+c[1][0]);
 picture = 1;
 showing();
}
function end(){
 $('#pic').attr("src",myAlbumsRoot+c[c.length-1][0]);
 picture = c.length-1;
 showing();
}
function randomImg(){
 picture = Math.floor( Math.random() * (c.length-1) ) + 1;
 $('#pic').attr("src",myAlbumsRoot+c[picture][0]);
 showing();
}
function rndImgToggle(){
 randomImageSlideShow = !randomImageSlideShow;
 rndImgChange();
}
function rndImgChange(){
 if (!hideControls) {
  var b = (randomImageSlideShow) ? rndImgOn : rndImgOff;
  $('#rImg').html(b);
 }
}
function showing() {
 if (!hideControls) {
  var a = (picture) + "/" + (c.length-1);
  $('#currNumber').html(a);
 }
 if (!hideDescription) {
  $('#description').html(c[picture][2]);
 }
}
function openImg() {
 runSlideShow = true;
 toggleShow();
 jQuery.facebox({ image: myAlbumsRoot+c[picture][1] })
}
function runShow(booln) {
 if (!booln && randomImageSlideShow && runSlideShow) randomImg();
 if (!booln && !randomImageSlideShow && runSlideShow) nxtImg();
 if (runSlideShow) setTimeout('runShow(false)', slideShowSpeed);
}
function toggleShow() {
 runSlideShow = !runSlideShow;
 changeButton();
}
function changeButton() {
 if (!hideControls) {
  var a = (runSlideShow) ? pauseImg : playImg;
  $('#tShow').html(a);
 }
 if (runSlideShow) runShow(true);
}
</script>
TopBottom

Abmonk (Guild Admin) 5/30/2009 6:40 PM EST : RE: Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

That's strange, as it looks ok on my screen

Grokui, the Slumbering Basilisk
FirstPrevPlayNextLast
1/3
Prev
Depths of Darkhollow
Next


(Not quite as above - I can't see how to copy like you did!)

I will have to check how others see it
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Abmonk (Guild Admin) 5/30/2009 7:49 PM EST : RE: Gallery Code Questions

Abmonk
Posts: 1099
Zomgawsh Poster

I got a couple of people to check, and they said it looked fine for them.
----------------------------------------------------------
Everquest - Abmonk - Raid leader for Kinship Alliance




TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%