PDA

View Full Version : Simple Controls Gallery v1.3



pagemasterrws
03-30-2009, 07:47 PM
1) Script Title: Simple Controls Gallery v1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

3) Describe problem: I am trying to use this on a PHP page. I followed the instructions completely and I get nothing. Just doesn't seem to work. I'm using IE 7 to view it. Below is a copy of the code I have...

<script type="text/javascript" src="scripts/jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="scripts/simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [330, 248], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027767-1132/JH4KB16516C006844_002_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027768-1132/JH4KB16516C006844_003_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027769-1132/JH4KB16516C006844_004_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027770-1132/JH4KB16516C006844_005_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027771-1132/JH4KB16516C006844_006_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027772-1132/JH4KB16516C006844_007_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027773-1132/JH4KB16516C006844_008_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027774-1132/JH4KB16516C006844_009_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027775-1132/JH4KB16516C006844_010_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027780-1132/JH4KB16516C006844_011_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027781-1132/JH4KB16516C006844_012_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027782-1132/JH4KB16516C006844_014_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027783-1132/JH4KB16516C006844_015_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027784-1132/JH4KB16516C006844_016_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027785-1132/JH4KB16516C006844_017_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027786-1132/JH4KB16516C006844_018_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027787-1132/JH4KB16516C006844_019_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027788-1132/JH4KB16516C006844_020_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027789-1132/JH4KB16516C006844_021_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027790-1132/JH4KB16516C006844_022_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027791-1132/JH4KB16516C006844_023_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027792-1132/JH4KB16516C006844_024_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027793-1132/JH4KB16516C006844_025_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027794-1132/JH4KB16516C006844_026_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027795-1132/JH4KB16516C006844_027_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027796-1132/JH4KB16516C006844_028_LG.jpg", "", "", ""]
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027776-1132/JH4KB16516C006844_029_LG.jpg", "", "", ""]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>
</head>

<body>
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="99%"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1024" height="250" title="ImportSuperStore.com">
<param name="movie" value="images/Movie2.swf" />
<param name="quality" value="high" />
<embed src="images/Movie2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1024" height="250"></embed>
</object></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/menubar.png">
<tr>
<td width="12%" align="center"><span class="style6"><img src="images/spacer.gif" width="1" height="25" align="absmiddle" /><a href="index2.php" class="menu">Home</a></span></td>
<td width="12%" align="center"><span class="style6"><a href="#" class="menu">Inventory</a></span></td>
<td width="12%" align="center"><span class="style6"><a href="#" class="menu">Financing</a></span></td>
<td width="12%" align="center"><span class="style6"><a href="#" class="menu">About Us </a></span></td>
<td width="12%" align="center"><span class="style6"><a href="#" class="menu">Contact</a></span></td>
<td width="12%" align="center"><span class="style6"><a href="#" class="menu">Credit Application</a> </span></td>
<td width="12%" align="center">&nbsp;</td>
<td width="12%" align="center">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" rowspan="17"><img src="images/spacer.gif" width="50" height="10" /></td>
<td><img src="images/itembktop.png" width="924" height="8" /></td>
<td width="50" rowspan="17"><img src="images/spacer.gif" width="50" height="10" /></td>
</tr>
<tr>
<td background="images/itembkmid.png"><img src="images/spacer.gif" width="8" height="8" /></td>
</tr>
<tr>
<td background="images/itembkmid.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12" rowspan="2"><img src="images/spacer.gif" width="12" height="10" /></td>
<td width="330"><div id="simplegallery1"></div></td>

ddadmin
03-31-2009, 04:32 AM
There may be additional errors, but there should be a comma at the end of each of your array elements, except the very last one:


["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027767-1132/JH4KB16516C006844_002_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027768-1132/JH4KB16516C006844_003_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027769-1132/JH4KB16516C006844_004_LG.jpg", "", "", ""],
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027770-1132/JH4KB16516C006844_005_LG.jpg", "", "", ""],
"
"
["http://portal.liquidmotors.com/lmPhotoManager/lmPhotoManager.aspx?23027776-1132/JH4KB16516C006844_029_LG.jpg", "", "", ""] //<--No comma for last one
],

If the above doesn't resolve the issue, please post a link to the page on your site that contains the problematic script so we can check it out.

Also in the future, please try and format any code in your post using the CODE tags. It just makes it easier to read.

pagemasterrws
04-01-2009, 02:50 PM
That did the trick! Thanks so much!
Next question. The images I'm using are actually 640 X 480. I'd like to display them at 330 X 248 using this script. Do you currently have a quick modification to allow me to do that?

Thanks again so much! :)

ddadmin
04-02-2009, 12:22 AM
Assuming you want all images to be of that width, inside the .js file, find the following line, and add to it the code in red:


layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0; width:330px; height:248px" />'

pagemasterrws
04-02-2009, 05:18 AM
Most excellent!! Thanks so much for all your help! This script is totally awesome!! Love it and thanks again!! :)