?
Solved

Scaling Images for a Javascript Gallery

Posted on 2009-02-11
5
Medium Priority
?
816 Views
Last Modified: 2012-06-27
Hello Everyone, I hope someone can help. Well I am working on a website that's a photography portfolio for a client. Knowing only CSS and having a limited knowledge of Javascirpt  I decided  to employ Javascript as the means to display the photos. Well with my lack of  experience of Java and to expedite the process I used a scipt created under the creative commons license by the site http://www.pizzabytheslice.com/tips/photogallery/. It's a great solution and what my client was looking for. Its a two page gallery, the first page the viewer encounters is a thumbnail page, the user then clicks on an image and then they are taken to another page where a larger version of the image is displayed and where the viewer can continue to click through the rest of the gallery through left right arrows. Sorry for the long winded back story but here's the question I want the images in the gallery to scale to the whatever the viewers browser window resolution may be. As it stands there are two script files by which I call to execute this process. Script A is the script i have posted is the main script by which all the functions  are defined, the creation of the thumbnail page  to the creation of the click  through gallery.  The other script, Script B defines the variables for the thumbnails and images. Both scripts are called in the .html  page of the image and in the .html of the thumbnail pages. As it stands the size of the images displayed are the dimensions defined in Script B. I have tried to use a liquidlayout in my css, but to no avail so Im assuming that you need to edit Script A posted below to achieve the scaling. I assume that in lines 444 and 445 where  -  '  l_pic.width  = g_aryWidth[f_idx];' one can use:

document.getElementById("imgTag").style.width = document.body.clientWidth;
document.getElementById("imgTag").style.height = document.body.clientHeight;

if only the resolution is smaller than 1280 x1024.

The thing is I don't know if this is at all possible or if I would have to duplicate the site, and create two versions of the site for different resolutions and use a browser detect script to redirect users accordingly. Another question I have is if it were possible to define the element - 'g_EID_Info' on line 452 to align right. In the attached script theres a function to display phtoinfo, as it is now the gallery displays the photoinfo on the left I want it to align right of the images. Thanks all for your time. I have pasted the code to Script A below and can e-mail to anyone the other script and my html code. Thanks again.

Adonis


// ======================================================================================
// This Photo Gallery written by Courts Carter, pizzabytheslice.com, v2.2.7 (1999-2005)
// Use, distribute, modify (improve. please?) according to Creative Commons agreement:
// http://creativecommons.org/licenses/by-nc/2.0/
// ======================================================================================
// 
//      DO NOT DIRECTLY ACCESS ANY VARIABLE
//      USE "GETTER" OR "SETTER" FUNCTIONS
// ---------------------------------------------------
// arrays holding the image info
var g_arySrc     = new Array(0); // image file names, for the src attribute of image tag
var g_aryDescr   = new Array(0);
var g_aryWidth   = new Array(0);
var g_aryHeight  = new Array(0);
var g_aryTitle   = new Array(0);
var g_aryExtra1  = new Array(0);
var g_aryExtra2  = new Array(0);
var g_aryExtra3  = new Array(0);
var g_aryExtra4  = new Array(0);
var g_aryDate    = new Array(0);
// arrays for thumbs
var g_aryImg     = new Array(); // stores image objects...
var g_aryIsLoaded= new Array(); // cofirmed that image has been loaded...
// slideshow
var g_isSshow      = false,// toggle
    g_SshowIntId   = null, // timer interval id/handle
    g_SshowLoopIdx = 0;    // counts times through the slideshow
var g_thisImg, 
    g_nextImg,
    g_prevImg,
    g_lastImg;
 
var g_ThmsPerPg,
    g_firstImgThisPg;
 
var g_aryAllowed  = new Array("file","description","width","height","title","date","extra1","extra2","extra3","extra4");
var g_aryAddArg   = new Array(0);
    g_aryAddArg   = g_aryAddArg.concat(g_aryAllowed);
 
var g_callbackFn   = pbtsNull;
var g_SshowDelay   = 4000; // delay in miliseconds
// ElementIds, if blank = not shown
var g_EID_Info     = "", // File Info
    g_EID_Img      = "theimage", // Image
    g_EID_Descr    = "imgdescr", // Image Description/Caption
    g_EID_Title    = "",
    g_EID_Extra1   = "",
    g_EID_Extra2   = "",
    g_EID_Extra3   = "",
    g_EID_Extra4   = "",
    g_EID_Date     = "",
    g_EID_PgNav    = "", // Thumbnail page index
    g_EID_Thms     = ""; // Area containing the thumbnails
var g_ThmDir       = "images/fotofolio001/thumbs/", 
    g_ImgDir       = "images/fotofolio001/", 
    g_HTMLThmPg    = "",
    g_HTMLImgPg    = "",
    g_Spacer       = "images/shim.gif", 
    g_loadingImg   = g_Spacer;
var g_ThmWidth     = 175,
    g_ThmClass     = "", // 
    g_ThmEmptyClass= "", // 
    g_ThmSpacing   = 2,
    g_ThmCols      = 3, 
    g_ThmRows      = 3,
    g_isThmTitles  = false,
    g_isThmAll     = false;
var g_isWrap       = true,
    g_isRotate90   = false;
var g_defDescr     = "",
    g_defTitle     = "",
    g_defDate      = "",
    g_defExtra1    = "",
    g_defExtra2    = "",
    g_defExtra3    = "",
    g_defExtra4    = "",
    g_defWidth     = 1,
    g_defHeight    = 1,
    g_isSetDescrWidth= false;
 
// ====================================================================================================
//   P R I V A T E
// ====================================================================================================
 
// ==================================================================
// FUNCTION: pbtsReadURLIdx
// scope:    private
// USE:      all
// DOES:     looks at URL parameters, accepts either "img=???", where ??? is index of image within 
//           this gallery or "file=???", where ??? is image filename
// RETURNS:  index of image requested in the URL
// PARAMS:   none
// ==================================================================
function pbtsReadURLIdx() {
  var l_tempStr=new String(window.location.search).toLowerCase();
  var l_id=0;
  var l_found=false;
  if (l_tempStr.substr(1,3)=="img"){
    // strip "img=" from URL
    l_tempStr= new String( l_tempStr.substr( 5, l_tempStr.length-5 ));
    if (l_tempStr.length < 1)
      l_tempStr= "0";
    else if (isNaN(l_tempStr))
      alert("\""+l_tempStr+"\" is not a valid number.");
    else
      l_id= parseInt( l_tempStr );
    if (l_id >= g_arySrc.length)
      l_id = (g_arySrc.length-1);
  } else if (l_tempStr.substr(1,4)=="file") {
    // stip "file=" from URL
    l_tempStr= l_tempStr.substr( 6, l_tempStr.length-6 );
    for (var i=0;i < g_arySrc.length; i++) {
      if (g_arySrc[i].toLowerCase() == l_tempStr) {
        l_id=i;
        l_found=true;
        break;
        } // if
    } // for
    if (!l_found)
      alert( "Sorry, did not find file \""+ l_tempStr+"\".");
  } // if URL handler
  return  l_id;
  } // pbtsReadURLIdx
 
// ==================================================================
function pbtsArrayFind(f_find,f_array){
  var l_Found=false;
  var j=0;
  for (;j <= f_array.length; j++) {
    if (f_find== f_array[j]) {
      l_Found=true;
      break;
    }// if
  }// for
  return l_Found;
}// pbtsIsValidArg
 
 
// ==================================================================
function pbtsNull(){ return true;}
 
// ==================================================================
// FUNCTION: pbtsTimeLoadImg
// SCOPE:    PRIVATE
// ==================================================================
function pbtsTimeLoadImg(){
  if (g_aryImg[g_thisImg].complete) {
    document.getElementById(g_EID_Img).src= g_aryImg[g_thisImg].src;
    g_aryIsLoaded[g_thisImg]= true;
    clearInterval(g_TimerId);
    g_callbackFn( g_thisImg );  
  }
} // pbtsTimeLoadImg
 
 
// ==================================================================
// FUNCTION: pbtsInitImgPg
// SCOPE:    PRIVATE
// USE:      Call this AFTER the setters on an image page
// DOES:     
// RETURNS:  none
// PARAMS:   none
// ==================================================================
function pbtsInitImgPg() {
  g_nextImg= g_thisImg + 1 ;
  g_prevImg= g_thisImg - 1 ;
  g_lastImg= g_arySrc.length-1;
  switchPic( g_thisImg );
  } // pbtsInitImgPg
 
 
// ==================================================================
// FUNCTION: pbtsInitThmbPg
// SCOPE:    PRIVATE
// USE:      Call this AFTER the setters on an thumbnail page
// DOES:     xxxx
// RETURNS:  none
// PARAMS:   none
// ==================================================================
function pbtsInitThmbPg() {
  g_ThmsPerPg= (g_ThmCols * g_ThmRows);
  g_lastPage = Math.ceil( g_arySrc.length/ g_ThmsPerPg);
  pbtsGetFirstIdx();
  pbtsWritePgNav();
  pbtsWriteThmGrid();
  } // pbtsInitThmbPg
 
// ==================================================================
// FUNCTION: pbtsGetFirstIdx
// USE:      
// DOES:     Using the Current Image Index calculate which thumbnail page it falls on, return the 
//           index of the first image on this page
//           Sets global g_firstImgThisPg 
// RETURNS:  see above
// PARAMS:   NONE
// ==================================================================
function pbtsGetFirstIdx() {
  if ((g_thisImg % g_ThmsPerPg) == 0) {
    g_firstImgThisPg = g_thisImg;
  } else {
    g_firstImgThisPg = g_thisImg - (g_thisImg % g_ThmsPerPg);
  }
  return g_firstImgThisPg;
  } // pbtsGetFirstIdx
 
// ==================================================================
// FUNCTION: pbtsWriteThmGrid
// USE:      thumbnail page
// DOES:     
// NOTES:    chooses min of width or height
// RETURNS:  none
// PARAMS:   change:
//            OLD: ElementId (optional) for area containing the thumbnails
//            NEW: isShowAll (optional) if true shows all thumbs
// ==================================================================
function pbtsWriteThmGrid() {
  var l_innerHTML= "";
  var l_title="";
  var idx=1;
  var l_start, l_stop, l_showAll;
  var l_isOnePg = (g_HTMLThmPg == g_HTMLImgPg); // 
  var l_spcHt= 0;
  var l_spcWd= 0;
  if (g_defWidth > g_defHeight){
    l_spcWd = g_ThmWidth;
    l_spcHt = Math.round(g_ThmWidth*(g_defHeight/g_defWidth));
  } else {
    l_spcWd = Math.round(g_ThmWidth*(g_defWidth/g_defHeight));
    l_spcHt = g_ThmWidth;
  }
 
  if (arguments.length > 0)
    l_showAll= arguments[0];
  else
    l_showAll= false;
  
  if (l_showAll) {
    l_start= 0; 
    l_stop=  g_arySrc.length;
  } else {
    l_start= g_firstImgThisPg; 
    l_stop=  g_firstImgThisPg+g_ThmsPerPg;
  }
 
  for (idx=l_start; idx < l_stop; idx++ ) {
 
    if ((idx % g_ThmCols) == 0) 
      l_innerHTML=l_innerHTML+ "<tr>";
 
    if (idx < g_arySrc.length) {
      if ((g_isThmTitles) && (g_aryTitle[idx].length > 0))
        l_title= "<br>"+g_aryTitle[idx];
      else
        l_title= "";
      l_innerHTML=l_innerHTML+ "<td valign=top \""+g_ThmClass+"\">";
      if (g_aryWidth[idx] > g_aryHeight[idx]) {
        if (l_isOnePg)
          l_innerHTML=l_innerHTML+ "<a href='javascript:switchPic("+idx+");'>";
        else 
          l_innerHTML=l_innerHTML+ "<a href='"+g_HTMLImgPg+"?img=" + idx + "'>";
        l_innerHTML=l_innerHTML+"<img src=\"" +g_ThmDir+ g_arySrc[idx]+ "\" border=0 alt=\"click for larger image\" width="+g_ThmWidth+"></a>"+l_title+"</td>";
      } else {
        if (l_isOnePg)
          l_innerHTML=l_innerHTML+ "<a href='javascript:switchPic("+idx+");'>";
        else 
          l_innerHTML=l_innerHTML+ "<a href='"+g_HTMLImgPg+"?img=" + idx + "'>";
        l_innerHTML=l_innerHTML+"<img src=\"" +g_ThmDir+ g_arySrc[idx]+ "\" border=0 alt=\"click for larger image\" height="+g_ThmWidth+"></a>"+l_title+"</td>";
      }
    } else {
      l_innerHTML=l_innerHTML+ "<td valign=top "+g_ThmEmptyClass+" ><img src=\""+g_Spacer+"\" width="+l_spcWd+" height="+l_spcHt+"></td>";
    } // if
 
    if ((idx % g_ThmCols) == (g_ThmCols-1)) 
      l_innerHTML=l_innerHTML+ "</tr>";
 
  } // for
 
  document.getElementById(g_EID_Thms).innerHTML= "<table cellspacing='"+g_ThmSpacing+"'>"+ l_innerHTML+ "</table>";
 
} // pbtsWriteThmGrid
 
// ==================================================================
// FUNCTION: pbtsKeyEvent
// SCOPE:    PRIVATE
// USE:      
// DOES:     handles keyPress events
// HISTORY:  modified detector code from: www.howtocreate.co.uk
// RETURNS:  true
// PARAMS:   
// ==================================================================
function pbtsKeyEvent(f_e) {
  var l_action= 0;
  var l_idx   = 0;
  if (typeof(f_e) == "undefined") // IE likes to use omnipresent "event"
    f_e=event; 
  if( typeof( f_e.which ) == "number") { //NS 4, NS 6+, Mozilla 0.9+, Opera
    l_action = f_e.which;
  } else if( typeof( f_e.keyCode ) == "number") { //IE, NS 6+, Mozilla 0.9+
    l_action = f_e.keyCode;
  } else if( typeof( f_e.charCode ) == "number") {  //also NS 6+, Mozilla 0.9+
    l_action = f_e.charCode;
  } else {
    l_action="";
  }
 
  switch (l_action) { 
    case  72: //  Help: H
    case 104:
      showHelp();
      break;
    case  83: //  Start/Stop Slideshow: S
    case 115:
      if (!g_isSshow)
        startSlideshow();
      else
        stopSlideshow();
      break;
    case  80: //  Previous: P
    case 112:
      gotoPrevPic();
      break;
    case  78: //  Next:  N
    case 110:
      gotoNextPic();
      break;
    case  76: // Last/End: "L" 
    case 108: // "l"
      gotoLastPic();
      break;
    case  70: // First/Home: "F"
    case 102: // "f"
      gotoFirstPic();
      break;
    case  85: //  page Up: U
    case 117:
      if ((g_firstImgThisPg+g_ThmsPerPg) < g_arySrc.length) {
        g_firstImgThisPg=g_firstImgThisPg+g_ThmsPerPg;
        pbtsWriteThmGrid();
      }
      break;
    case  68: //  page Down: D
    case 100:
      if (g_firstImgThisPg >= g_ThmsPerPg) {
        g_firstImgThisPg=g_firstImgThisPg-g_ThmsPerPg;
        pbtsWriteThmGrid();
      }
      break;
    default: 
      // numbers 0-9 {1-9 & 0=10}
      if ((l_action >= 48) && (l_action<=57)){
        l_idx=l_action-48;
        if (l_idx > 0)
          l_idx--;
        else
          l_idx=9; // press 0 for tenth image
        if ((g_firstImgThisPg+l_idx) < g_arySrc.length) {
          switchPic(g_firstImgThisPg+l_idx);
          } // inbounds
        } // 0-9 pressed
      // end:default
  } // switch
 
  return true;
  } //pbtsKeyEvent
 
// ==================================================================
// FUNCTION: pbtsWritePgNav
// USE:      thumbnail page
// DOES:     xxxx
// RETURNS:  xxxx
// PARAMS:   ElementID (optional) where innerHTMl will write the thumbnail page links
// ==================================================================
function pbtsWritePgNav() {
  var l_innerHTML= "";
  var idx=1;
 
  if (arguments.length > 0)
    g_EID_PgNav= arguments[0];
 
  if (g_EID_PgNav == "")
    return;
 
  for (; idx <= g_lastPage; idx++ ) {
    if ((g_firstImgThisPg >= ((idx-1)*g_ThmsPerPg)) && (g_firstImgThisPg <= ((idx*g_ThmsPerPg)-1))) {
      l_innerHTML=l_innerHTML+ " <b>" + idx + "</b> ";
    } else {
      l_innerHTML=l_innerHTML+" <a href='javascript:rePgIdx(" + ((idx-1)*g_ThmsPerPg) + ");'>" + idx + "</a> ";
    } // if
  } // for
  if (g_isThmAll && (g_lastPage > 1))
    l_innerHTML=l_innerHTML+" <a href='javascript:showAll();'>all</a> ";
  document.getElementById(g_EID_PgNav).innerHTML= l_innerHTML;
 
  } // pbtsWritePgNav
 
// ====================================================================================================
//   W R I T T E N
// ====================================================================================================
 
// ==================================================================
// FUNCTION: rePgIdx
// USE:      thumbnail page
// DOES:     rewrite page index
// RETURNS:  
// PARAMS:   
// ==================================================================
function rePgIdx(f_imgIdx) {
  g_thisImg= f_imgIdx;
  pbtsGetFirstIdx();
  pbtsWritePgNav();
  pbtsWriteThmGrid();
  if (g_HTMLThmPg == g_HTMLImgPg)
    switchPic( f_imgIdx );
  } // rePgIdx
 
// ==================================================================
// FUNCTION: switchPic
// USE:      image page
// DOES:     xxxx
// RETURNS:  xxxx
// PARAMS:   f_idx: index of image to show
// ==================================================================
function switchPic( f_idx ) {
  var l_pic= document.getElementById(g_EID_Img);
  if (f_idx < 0) {
    if (g_isWrap)
      switchPic(g_lastImg);
    else
      alert( "this is the first picture" );
  } else if (f_idx > g_lastImg) {
    if (g_isWrap)
      switchPic(0);
    else
      alert( "this is the first picture" );
  } else {
    // to avoid ugly resizing 'blank' the image before changing dimensions
    if (!g_aryIsLoaded[f_idx]) {
      l_pic.src = g_loadingImg;
    } else {
      l_pic.src= g_ImgDir + g_arySrc[f_idx];
    }
 
    // 
    l_pic.width  = g_aryWidth[f_idx];
    l_pic.height = g_aryHeight[f_idx];
    if (g_EID_Descr != "") {
      if (g_isSetDescrWidth)
        document.getElementById(g_EID_Descr).innerHTML= "<p style=\"width:" +g_aryWidth[f_idx]+ "px;\">"+g_aryDescr[f_idx]+"</p>";
      else
        document.getElementById(g_EID_Descr).innerHTML= g_aryDescr[f_idx];
    }
    if (g_EID_Info != "") document.getElementById(g_EID_Info).innerHTML= "file: "+ g_arySrc[f_idx] +" (" +g_aryWidth[f_idx]+ "W x "+ g_aryHeight[f_idx]+"H)";
    if (g_EID_Title  != "") document.getElementById(g_EID_Title).innerHTML = g_aryTitle[f_idx];
    if (g_EID_Extra1 != "") document.getElementById(g_EID_Extra1).innerHTML= g_aryExtra1[f_idx];
    if (g_EID_Extra2 != "") document.getElementById(g_EID_Extra2).innerHTML= g_aryExtra2[f_idx];
    if (g_EID_Extra3 != "") document.getElementById(g_EID_Extra3).innerHTML= g_aryExtra3[f_idx];
    if (g_EID_Extra4 != "") document.getElementById(g_EID_Extra4).innerHTML= g_aryExtra4[f_idx];
    if (g_EID_Date   != "") {
      if (g_aryDate[f_idx]!="")
        document.getElementById(g_EID_Date).innerHTML  = "taken :"+g_aryDate[f_idx];
      else
        document.getElementById(g_EID_Date).innerHTML  = "";
    }
 
    g_thisImg= f_idx;
    g_nextImg= f_idx + 1 ;
    g_prevImg= f_idx - 1 ;
 
    // now all is in place to either exit or download the image.
    if (!g_aryIsLoaded[f_idx]) {
      g_aryImg[f_idx]= new Image();
      g_aryImg[f_idx].src = g_ImgDir + g_arySrc[f_idx];
      g_TimerId = setInterval("pbtsTimeLoadImg()", 250 );
    } else {
      g_callbackFn( f_idx );
    }
    } // if
  } // switchPic
 
// ====================================================================================================
//   D E V E L O P M E N T
// ====================================================================================================
 
// ==================================================================
// FUNCTION: writeMaxWidthShim
// USE:      detail page
// DOES:     xxxx
// RETURNS:  xxxx
// PARAMS:   xxxx
// ==================================================================
function writeMaxWidthShim(f_id) {
  var idx=1;
  var l_maxWidth=0;// 
  for (idx=g_firstImgThisPg; idx < (g_firstImgThisPg+g_ThmsPerPg); idx++ ) {
    if (idx < g_arySrc.length) {
      if (g_aryWidth[idx] > l_maxWidth)
        l_maxWidth= g_aryWidth[idx];
    } // if
  } // for
  document.getElementById(f_id).innerHTML= "<img src=\""+g_Spacer+"\" width="+l_maxWidth+" height=\"1\">";
} // writeMaxWidthShim
 
 
// ====================================================================================================
//     P U B L I C
// ====================================================================================================
 
// ==================================================================
// FUNCTION: addImg
// USE:      all
// DOES:     adds an image
// RETURNS:  index of the new Image item
// PARAMS:   g_aryAllowed, unless you've re-ordered the list
// ==================================================================
function addImg(){
  var i=0;
  var j=g_arySrc.length;
 
  if (arguments.length > g_aryAddArg.length) {
    alert( "Photo Gallery function \"addImg\" received too many arguments. Call had "+arguments.length+" arguments.");
    return false;
    }//if
 
  g_arySrc[j]   = "";
  g_aryDescr[j] = g_defDescr;
  g_aryWidth[j] = g_defWidth;
  g_aryHeight[j]= g_defHeight;
  g_aryTitle[j] = g_defTitle;
  g_aryDate[j]  = g_defDate;
  g_aryExtra1[j]= g_defExtra1;
  g_aryExtra2[j]= g_defExtra2;
  g_aryExtra3[j]= g_defExtra3;
  g_aryExtra4[j]= g_defExtra4;
 
  g_aryIsLoaded[j]= false;
 
  for (i=0; i < arguments.length; i++) {
    if (arguments[i]!=null) {
      switch (g_aryAddArg[i]){
        case "file"     : g_arySrc[j]   = arguments[i]; break;
        case "description": g_aryDescr[j]= arguments[i]; break;
        case "width"    : g_aryWidth[j] = arguments[i]; break;
        case "height"   : g_aryHeight[j]= arguments[i]; break;
        case "title"    : g_aryTitle[j] = arguments[i]; break;
        case "date"     : g_aryDate[j]  = arguments[i]; break;
        case "extra1"   : g_aryExtra1[j]= arguments[i]; break;
        case "extra2"   : g_aryExtra2[j]= arguments[i]; break;
        case "extra3"   : g_aryExtra2[j]= arguments[i]; break;
        case "extra4"   : g_aryExtra4[j]= arguments[i]; break;
      }// switch
    }//if null skip
  }// for
  if (g_isRotate90) {
    g_aryWidth[j] = g_defHeight;
    g_aryHeight[j]= g_defWidth;
    }
  g_isRotate90= false;
  return j;
  } // addImg
 
// ==================================================================
// FUNCTION: addImg90
// USE:      all
// DOES:     adds an image, 90 degree rotation (portrait v. landscape)
// RETURNS:  see addImg
// PARAMS:   see addImg
// ==================================================================
function addImg90(){
  var i=0;
  var f_ary= new Array( g_aryAllowed.length );
  for (i=0;i < g_aryAllowed.length; i++) f_ary[i]=null;
  for (i=0;i < arguments.length; i++) f_ary[i]=arguments[i];
  g_isRotate90= true;
  return addImg( f_ary[0],f_ary[1],f_ary[2],f_ary[3],f_ary[4],f_ary[5],f_ary[6],f_ary[7],f_ary[8],f_ary[9] );
  } // addImg90
 
// ==================================================================
// FUNCTION: goto[Prev | Next | First | Last ]Pic
// USE:      image page
// DOES:     switches picture
// RETURNS:  xxxx
// PARAMS:   none
// ==================================================================
function gotoPrevPic(){return switchPic( g_prevImg );}
function gotoNextPic(){return switchPic( g_nextImg );}
function gotoFirstPic(){return switchPic(0);}
function gotoLastPic(){return switchPic( g_lastImg );}
 
// ==================================================================
// FUNCTION: gotoThumbs
// USE:      image page
// DOES:     changes page to ...
// RETURNS:  none
// PARAMS:   none
// ==================================================================
function gotoThumbs() { 
  window.location = g_HTMLThmPg +"?img="+ g_thisImg ;
  return false;
  } //gotoThumbs
 
// ==================================================================
function showHelp() {
  alert( "Photo Gallery Help (v2.2.7)\nwww.pizzabytheslice.com\n\nF= First image\nL= Last\n\nN= Next Image\nP=Previous\n\n1-9,0 enlarge thumbnail 1-10\n\nS= Start/Stop Slideshow (delay is "+ (g_SshowDelay/1000)+ " seconds)\n\nU= page Up (next thumbnail page)\nD= page Down"  );
  } // showHelp
 
function showAll() { pbtsWriteThmGrid(true);}
 
// ==================================================================
function startSlideshow() {
  stopSlideshow();
  g_SshowIntId= window.setInterval( "gotoNextPic()", g_SshowDelay );
  g_isSshow= true;
  g_SshowLoopIdx= 0;
  } // startSlideshow
 
function stopSlideshow() {
  if (g_isSshow) {
    g_isSshow= false;
    clearInterval(g_SshowIntId);
    }
  } // stopSlideshow
 
// DOES:    starts/stops slideshow. 
// RETURNS: the new slideshow state; true if slideshow has been started, false if it has been STOPPED.
function toggleSlideshow() {
  if (g_isSshow) {
    stopSlideshow();
  } else {
    startSlideshow();
  }
  return g_isSshow;
  } // toggleSlideshow
 
// ==================================================================
function enableQuickKeys() {
  document.onkeypress= pbtsKeyEvent;
  } // enableQuickKeys
 
// ==================================================================
// FUNCTION: writeGallery
// USE:      All. Call AFTER you've called all of your "setters"
// DOES:     xxxx
// RETURNS:  xxxx
// PARAMS:   imageIndex (optional) if missing reads index of current Image from the URL
// ==================================================================
function writeGallery() {
  var l_tempStr=new String(window.location.pathname).toLowerCase();
  var l_thm= new String(g_HTMLThmPg).toLowerCase();
  var l_img= new String(g_HTMLImgPg).toLowerCase();
 
  if (g_arySrc.length < 1) {
    alert( "Photo Gallery function \"writeGallery\" failed because the gallery contains no images." );
    return false;
    }
  if (arguments.length > 0)
    g_thisImg= arguments[0];
  else
    g_thisImg= pbtsReadURLIdx();
 
  if (l_thm.toString() == l_img.toString()) {
    pbtsInitThmbPg();
    pbtsInitImgPg();
  } else if ((l_thm.length > 0) && (l_tempStr.indexOf(l_thm.toString()) >= 0)) {
    pbtsInitThmbPg();
  } else if ((l_img.length > 0) && (l_tempStr.indexOf(l_img.toString()) >= 0)) {
    pbtsInitImgPg();
  } else {
    alert( "Photo Gallery function \"writeGallery\" failed to recognize Thumbnail or Image page" );
  }
  
} // writeGallery
 
// ==================================================================
// FUNCTION: reorderArgs
// USE:      all
// DOES:     can change the add order at any time
// RETURNS:  true if successful
// PARAMS:   attribute 
// ==================================================================
function reorderArgs() {
  var i=0,
      l_Str=new String,
      l_Ary=new Array(0);
  // validate attribes
  for (i=0;i<arguments.length;i++) {
    l_Str= arguments[i];
    l_Ary[l_Ary.length]=l_Str.toLowerCase();
    if (!pbtsArrayFind(l_Ary[i],g_aryAllowed)) {
      alert( "Photo Gallery function \"reorderArgs\" did not recognize attribute \""+l_Ary[i]+"\"" );
      return false;
    }// if
  }// for i
  // just add the missing args
  for (i=0;i<g_aryAllowed.length;i++){
    if (!pbtsArrayFind(g_aryAllowed[i],l_Ary)) {
      l_Ary[l_Ary.length]=g_aryAllowed[i];
    } // if
  }// for
  // now copy 
  for (i=0;i<l_Ary.length;i++){
    g_aryAddArg[i]=l_Ary[i];
  }// for
  return true;
} // reorderArgs
 
 
// ==================================================================
// FUNCTION: setElementId
// USE:      all
// DOES:     
// RETURNS:  
// PARAMS:   attribute, element's Id
// ==================================================================
function setElementId( p_attrb, p_id ) {
  switch (new String(p_attrb).toLowerCase()) {
    case "image"      : g_EID_Img    = p_id;break;
    case "description": g_EID_Descr  = p_id;break;
    case "title"      : g_EID_Title  = p_id;break;
    case "extra1"     : g_EID_Extra1 = p_id;break;
    case "extra2"     : g_EID_Extra2 = p_id;break;
    case "extra3"     : g_EID_Extra3 = p_id;break;
    case "extra4"     : g_EID_Extra4 = p_id;break;
    case "date"       : g_EID_Date   = p_id;break;
    case "info"       : g_EID_Info   = p_id;break;
    case "pages"      : g_EID_PgNav  = p_id;break;
    case "thumbs"     : g_EID_Thms   = p_id;break;
    default:
      alert( "Photo Gallery function \"setElementId\" did not recognize attribute \""+p_attrb+"\"" );
      break;
  } // switch
  }//setElementId
 
 
// ==================================================================
// FUNCTION: setDefault
// USE:      
// DOES:     establishes the value to be used for all subsequent calls to addImg 
// RETURNS:  
// PARAMS:   f_attribute, f_defaultValue 
// ==================================================================
function setDefault( f_attribute, f_defaultValue ){
  if (!pbtsArrayFind(f_attribute,g_aryAllowed)) {
    alert( "Photo Gallery function \"setDefault\" did not recognize attribute \""+f_attribute+"\"" );
    return false;
  }// if
  switch (f_attribute){
    case "description": g_defDescr= f_defaultValue; break;
    case "width"    : g_defWidth=  f_defaultValue; break;
    case "height"   : g_defHeight= f_defaultValue; break;
    case "title"    : g_defTitle=  f_defaultValue; break;
    case "date"     : g_defDate=   f_defaultValue; break;
    case "extra1"   : g_defExtra1= f_defaultValue; break;
    case "extra2"   : g_defExtra2= f_defaultValue; break;
    case "extra3"   : g_defExtra3= f_defaultValue; break;
    case "extra4"   : g_defExtra4= f_defaultValue; break;
    default:
      alert( "Photo Gallery function \"setDefault\" \""+p_attribute+"\" does not accept defaults." );
      break;
  }// switch
} // setDefault
 
 
// ==================================================================
// FUNCTION: setters
// USE:      PUBLIC
// ==================================================================
 
// -------------------------------------------
/* file names and locations functions */
function setThumbDir(p_path){ g_ThmDir=p_path; }
function setImgDir(p_path){ g_ImgDir=p_path; }
function setThumbPage(p_val){ g_HTMLThmPg=p_val; }
function setImgPage(p_val){ g_HTMLImgPg=p_val; }
function setSpacer(p_val){ g_Spacer=p_val; }
function setLoadingImg(p_Image){ g_loadingImg=p_Image; }
 
// -------------------------------------------
/* thumbnail appearance functions */
function setRows( p_rows ){ g_ThmRows=  p_rows;}
function setCols( p_cols ){ g_ThmCols=  p_cols;}
function setThumbClass(p_class){ g_ThmClass=" class='"+p_class+"'"; }
function setThumbEmptyClass(p_class){ g_ThmEmptyClass=" class='"+p_class+"'"; }
function setThumbWidth(p_val){ g_ThmWidth=p_val; }
function setThumbSpacing(p_val){ g_ThmSpacing=p_val; }
function setThumbTitles(p_on){ g_isThmTitles=p_on; }
function setThumbAll(p_on){ g_isThmAll=p_on; }
 
// -------------------------------------------
/* behavior and defaults functions */
function setDelay(p_miliseconds){ g_SshowDelay= p_miliseconds;}
function setWrap(p_on){ g_isWrap=p_on; }
function setDefDims( p_width, p_height ){ 
 if (p_width < 1) p_width=1;
 g_defWidth=p_width; 
 if (p_height < 1) p_height=1;
 g_defHeight=p_height;
 }
 
// -------------------------------------------
/* Element Id setting functions */
function setImageId( p_id )     { g_EID_Img      =  p_id;}
function setImageDescrId( p_id ){ g_EID_Descr    =  p_id;}
function setImageInfoId( p_id ) { g_EID_Info =  p_id;}
function setImageTitleId( p_id ){ g_EID_Title    =  p_id;}
 
function setThumbIndexId( p_id ){ g_EID_PgNav  =  p_id;}
function setThumbGridId( p_id ) { g_EID_Thms   =  p_id;}
 
// -------------------------------------------
// setOnChange 
function setCallback(f_fn){ g_callbackFn=f_fn;}
 
// ==================================================================
// setSetDescrWidth ... this is a temp kludge
// this will fix the width of the caption (i.e. the description) for an image to be the same as the image's width.
// this is useful when the image detail and thumbnails appear on the same page.
// ==================================================================
function setSetDescrWidth(p_on){ g_isSetDescrWidth=p_on; } 
 
// ==================================================================
// FUNCTION: getters (returns values of stuff)
// USE:      PUBLIC
// ==================================================================
 
function getCount() { return g_arySrc.length; }
 
// ==================================================================
// FUNCTION: getIsSlideshow
// USE:      all
// RETURNS:  returns TRUE if currently in slideshow mode, false otherwise (slideshow has been stopped or never started)
// PARAMS:   none
// ==================================================================
function getIsSlideshow() { return g_isSshow; }
 
// ==================================================================
// FUNCTION: getValue
// USE:      all
// DOES:     
// RETURNS:  value of the specified attribute for the specified image (or current one, in none given)
// PARAMS:   p_attribute
//           index (optional)
// ==================================================================
function getValue( p_attribute ) {
  var l_idx=g_thisImg;
  if (arguments.length > 1)
    l_idx= arguments[1];
  switch (new String(p_attribute).toLowerCase()) {
    case "file":        return g_arySrc[l_idx]; 
    case "description": return g_aryDescr[l_idx]; 
    case "width":       return g_aryWidth[l_idx]; 
    case "height":      return g_aryHeight[l_idx];
    case "title":       return g_aryTitle[l_idx];
    case "extra1":      return g_aryExtra1[l_idx];
    case "extra2":      return g_aryExtra2[l_idx];
    case "extra3":      return g_aryExtra3[l_idx];
    case "extra4":      return g_aryExtra4[l_idx];
    case "date":        return g_aryDate[l_idx];
 
    case "dir":         return g_ImgDir; 
    case "thumbdir":    return g_ThmDir; 
    case "pathname":    return g_ImgDir+g_arySrc[l_idx]; 
 
    case "count":       return g_arySrc.length;
    case "current":     return g_thisImg; 
    case "maxwidth":
      var i=0;
      var l_max=-1;
      for (;i < g_aryWidth.length; i++)
        l_max=Math.max(l_max, g_aryWidth[i]);
      return l_max;
      break;
    case "maxheight":
      var i=0;
      var l_max=-1;
      for (;i < g_aryHeight.length; i++)
        l_max=Math.max(l_max, g_aryHeight[i]);
      return l_max;
      break;
    default:
      alert( "Photo Gallery function \"getValue\" did not recognize attribute \""+p_attribute+"\"" );
      break;
  } // switch
  }//getValue

Open in new window

0
Comment
Question by:adonis_designs
  • 2
  • 2
4 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 23620191
The secret is in the CSS and not the Javascript. Javascript is calling some ID in CSS....What does the CSS container or body tag read?

MD
0
 

Author Comment

by:adonis_designs
ID: 23629535
Well here is the Style Sheet and the HTML
/* CSS Document */
 
 
 
body {
color:#000;
margin:20px;
padding:0px;
width:100%;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: small;
}
 
p {
font-family:11px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: .06ems;
margin:0px 0px 0px 0px;
padding:0px;
}
.content>p {margin:0px;}
.content>p+p {text-indent:30px;}
 
a {
color:#bbbbbb;
font-size:.06ems;
font-weight:lighter;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
text-decoration:none;
border-style:none;
}
 
 
 
.content {
position:relative; 
width:auto;
min-width:120px;
margin:80px 0px 0px 425px;
z-index:3; 
}
 
#navAlpha {
position:absolute;
width:256px;
z-index:2;
 
voice-family: "\"}\"";
voice-family:inherit;
width:256px;
left: 100px;
top: 75px;
}
 
body>#navAlpha {width:256px;}
#navBeta {
position:absolute;
width:190px;
right:75px;
top:450px;
padding:10px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
 
body>#navBeta {width:200px;}
 
#sidemenuA {
width:200px;
float:right;
margin-top: 65px;
padding-right:5px;
}
 
#sidemenuA ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
 
#sidemenuA li {
    display: inline;
}
 
#sidemenuA a {
    display: block;
    width: 200px;
    text-align: right;
padding-top:6px; 
}
 
#sidemenuB {
width:100px;
float:right;
margin-top: 10px;
padding-right:5px;
}
 
#sidemenuB ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
 
#sidemenuB li {
    display: inline;
}
 
#sidemenuB a {
    display: block;
    width: 100px;
    text-align: right;
padding-top:6px; 
}
 
 
 
#border{
width:100px;
border-top:thin dotted;
border-color:#bbbbbb;
}
 
img
{
position: inherit;
border-color:white;
 
}
 
 
/*HTML Document*/
 
<html>
  <head>
    <title>photo_folio_001</title>
    <style type="text/css" media="screen">@import "styleIMAGES.css";</style>
	<script type="text/javascript" src="pbtsgallery.js"></script>
    <script type="text/javascript" src="fotofolio_001.js"></script>
  </head>
  
  
<body>
 
<div id="navAlpha"><a href="file:///Macintosh HD/Users/adonisbellezar/Desktop/klosterman/index_menu.html"><img src="images/CK_logo.jpg" alt="CK logo" border="0"></a>
<div id="sidemenuA">
		<p align="right">
			<a href="fotofolio001_thumbs.htm">Photo_folio_001 / Thumbnails</a>			</p>
</div>
 
 
 
<div id="sidemenuB">
<div id="border"></div>
		<p align="right">
			<a href="file:///Macintosh HD/Users/adonisbellezar/Desktop/klosterman/index_menu.html">menu</a>			</p>
</div>
</div>
<div class="content">
	<p><a href="javascript:void(gotoNextPic());"><img src="/images/shim.gif" border="0" width="1" height="1" id="thephoto" alt="click for next photo"></a></p>
	  
	
	  
 
	  
	  
	  
        <span id="caption"></span>
          
            <span id="photoinfo"></span>  
                   
        <br />
 
        <p>
<a href="javascript:void(gotoPrevPic());">
<img src="images/leftArrow.png"  alt="previous"></a> 
  
<a href="javascript:void(gotoNextPic());">
<img src="images/rightArrow.png" alt="next"></a></p> 
          
          
            <script language="javascript" type="text/javascript">
  setElementId( "image", "thephoto" );
  setElementId( "description", "caption" )
 
 
  writeGallery();
 
 
          </script>
</div>
 
<div id="footer"></div>
</body>
</html>

Open in new window

0
 

Accepted Solution

by:
adonis_designs earned 0 total points
ID: 23643659
I guess made this harder then I thought it would be. It helps to step back and walk away from your work, I took your suggestion myderrick and did the following changes:

#content {
width:75%;
height:75%;
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
margin:71px 0px 0px 375px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#content img
{
max-width:100%;
max-height:100%;
height:100%;
width:auto;

}

and it works perfect. I am now working on placing the navigation to the right of the photos, which I am sure is a matter of using a right align div that expands and contracts with the div that contains the images. Thanks so much.
0
 
LVL 13

Expert Comment

by:myderrick
ID: 23647775
Glad you are getting it fix. Let us have updates.

MD
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question