|
HTML - Help Tweaking Code, Image Slideshow
Hey guys, my problem is I need this code to be tweaked so that when the page is loaded there are 5 thumbnail images between the forward and backward buttons. Currently, the way it is configured, only three images show to start, but as you click on a thumbnail to load a new picture, more thumbnails show up, up to five. I tried to change this myself, only to have the wrong image load when the thumbnail is clicked and other problems. So here is the code in question:
HTML Code: <body onload="preloadImages();" bgcolor="black">
<div id="wrapper">
<div id="layer1">
<div style="position:relative;width:958px;height:645px;-adbe-g:p;">
<div style="position:absolute;top:544px;left:112px;width:69px;height:25px;">
<a onmouseover="changeImages('HomeText','Images/HomeTextRolloverGif.gif');return true" onmouseout="changeImages('HomeText','Images/HomeTextGif.gif');return true" href="IanGIbbonsPhotographyMain.html"><img id="HomeText" src="Images/HomeTextGif.gif" alt="" name="HomeText" height="25" width="69" border="0" /></a></div>
<div style="position:absolute;top:544px;left:256px;width:84px;height:23px;">
<a onmouseover="changeImages('AboutText','Images/AboutTextRolloverGif.gif');return true" onmouseout="changeImages('AboutText','Images/AboutTextGif.gif');return true" href="IanGIbbonsPhotographyAbout.html"><img id="AboutText" src="Images/AboutTextGif.gif" alt="" name="AboutText" height="23" width="84" border="0" /></a></div>
<div style="position:absolute;top:544px;left:400px;width:67px;height:25px;">
<a onmouseover="changeImages('HireText','Images/HireTextRolloverGif.gif');return true" onmouseout="changeImages('HireText','Images/HireTextgif.gif');return true" href="IanGIbbonsPhotographyHire.html"><img id="HireText" src="Images/HireTextgif.gif" alt="" name="HireText" height="25" width="67" border="0" /></a></div>
<div style="position:absolute;top:544px;left:528px;width:112px;height:21px;">
<a onmouseover="changeImages('ContactText','Images/ContactTextRolloverGif.gif');return true" onmouseout="changeImages('ContactText','Images/ContactTextGif.gif');return true" href="IanGIbbonsPhotographyContact.html"><img id="ContactText" src="Images/ContactTextGif.gif" alt="" name="ContactText" height="21" width="112" border="0" /></a></div>
<div style="position:absolute;top:544px;left:704px;width:131px;height:22px;">
<a onmouseover="changeImages('CalendarText','Images/CalendarTextRolloverGif.gif');return true" onmouseout="changeImages('CalendarText','Images/CalendarTextGif.gif');return true" href="#"><img id="CalendarText" src="Images/CalendarTextGif.gif" alt="" name="CalendarText" height="22" width="131" border="0" /></a></div>
<div style="position:absolute;top:80px;left:128px;width:69px;height:317px;">
<table>
<tr>
<td>
<div align="center">
<a href="javascript:prevSet()"><img class="nobo" src="Images/prevSet.gif" alt="Previous Set" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
<tr>
<td><a href="javascript:setPic(-2)"><img id="thumbnail1" src="Images/dot.gif" alt="" name="thumbnail1" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(-1)"><img id="thumbnail2" src="Images/dot.gif" alt="" name="thumbnail2" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(0)"><img id="thumbnail3" src="Images/thumbnails/Image1.png" alt="" name="thumbnail3" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(1)"><img id="thumbnail4" src="Images/thumbnails/Image2.png" alt="" name="thumbnail4" style="border-style: none" /> </a></td>
</tr>
<tr>
<td><a href="javascript:setPic(2)"><img id="thumbnail5" src="Images/thumbnails/Image2.png" alt="" name="thumbnail5" style="border-style: none" /> </a></td>
</tr>
<tr>
<td>
<div align="center">
<a href="javascript:nextSet()"><img class="nobo" src="Images/nextSet.gif" alt="Next" style="border-style: none" /> </a><br />
</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;top:97px;left:280px;width:565px;height:386px;">
<img id="BigPic" src="Images/Photography/Start.png" alt="Enforcer" name="BigPic" /></div>
<csnopos>
<cspos xpos="80" xpos="0">
<script type="text/javascript" language="javascript">
filenames = new Array (
"Image1.png",
"Image2.png",
"Image2.png",
"Image4.png",
"Image5.png" )
descriptions = new Array (
"Image1.png",
"Image2.png",
"Image3.png",
"Image4.png",
"Image5.png" )
picCount = filenames.length;
index = 0;
function getPic(i) {
return filenames[i];
}
function getDesc(i) {
return descriptions[i];
}
function setPic(thumb) {
if ( index + thumb >= 0 && index + thumb < picCount ) {
index = index + thumb;
var mainPic = document.getElementById('BigPic');
newPic = "Images/Photography/" + getPic(index);
mainPic.src = newPic;
updateThumbs();
}
}
function prevPic() {
if ( index > 0 ) {
index--;
updateThumbs();
}
}
function nextPic() {
if ( index < picCount ) {
index++;
updateThumbs();
}
}
function prevSet() {
if ( index > 5 ) {
index = index - 5;
} else {
index = 3;
}
updateThumbs();
}
function nextSet() {
if ( index < picCount - 5 ) {
index = index + 5;
} else {
index = piccount - 3;
}
updateThumbs();
}
function first() {
index = 2;
updateThumbs();
}
function last() {
index = picCount - 4;
updateThumbs();
}
function updateThumbs() {
for ( i = 1; i < 6; i++ ) {
var thumbPic = document.getElementById('thumbnail' + i);
thumbindex = index + (i - 3);
if ( thumbindex >= 0 && thumbindex < picCount ) {
newPic = "Images/thumbnails/" + getPic(thumbindex);
} else {
newPic = "Images/dot.gif";
}
thumbPic.src = newPic;
}
}
</script>
You can find this in practice he https://campfireditties2.sslpowered....onsPeople.html Any help would be tremendously appreciated. Similar TutorialsHello, I am needing help finding out how to remove a link in my HTML slideshow code. I made the slideshow for this website using slide.com and want to remove the link behind it that directs you to their site! The slideshow is fine but when you click on it, it directs you to "Their Site", I don't want that. I was wondering if the code was embedded, please help! Here is the code: <p style='visibility:visible;'><object type='application/x-shockwave-flash' data='http://widget-a3.slide.com/widgets/slideticker.swf' height='200' width='250' style='width:250px;height:200px'><param name='movie' value='http://widget-a3.slide.com/widgets/slideticker.swf' /><param name='quality' value='high' /><param name='scale' value='noscale' /><param name='salign' value='l' /><param name='wmode' value='transparent'/> <param name='flashvars' value='cy=ms&il=1&channel=2666130979436416163&site=widget-a3.slide.com'/></object><p style='white-space:nowrap'><a href Hello all, If someone could assist me with the coding necessary to add a slideshow (photos banners etc) to webpages that would be very much appreciated. I am familiar with quite a lot of html formatting and have created a few functional homepages, but have no experience with this particular aspect. Thanks a lot in advance Lalita I have a Form on a web page where the fields look good in IE7, but look a little out-of-whack in IE6. I've done as much as I can do in IE6.css and the main.css. When I adjust the page to look better in IE6, it starts to look a little worse in IE7. I see on a main page, there is a code like this: Code: <!--[if IE 6]>
<link rel="stylesheet" href="[var.base_url]/themes/[var.user_theme]/css/ie6.css" type="text/css">
<![endif]-->
Can I use somthing like that on the web page that has the Form, basically saying, if you're viewing this Form in IE6 this is how the Form code should be..." ? If yes, can you tell me, basically how to create it with an Code: <!--[if IE 6]> ? thanks How do I make a slideshow where images roll and when clicked on go to another page? Hi everyone, I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/. The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot. Any help would be very much appreciated. Thanks Bec Hi I have multiple images on my home page working in a slideshow as you can see at www.1bit.org.uk/yourhome But, what I want is the same as what I have on this site: http://www.villavacationsvip.com/viprestaurants.html The difference is on that second slideshow, it uses flash. I don't want to use flash so is this possible to do? Hope someone can help me please... I'm trying to find the best way to place an image slideshow (continual loop, no stopping etc) on my home page. I've tried a few what look like good JavaScript versions, which I cannot get to work properly - seem to conflict with other JavaScripts running on the same page. Does anyone have any ideas? Or is there a way to do this without using JavaScript (or Flash)? I'm using Joomla CMS if that helps/makes a difference... Thanks in advance! Hey there, Currently have Code: slideimages[0]='<a href="boxers/paul.html"><img src="images/boxerpaul.jpg" border=0"></a>' Im looking at opening a new window when you click this picture that will open a 600x600 window without toolbars but just cant seem to get it to work. Have tried, Code: <a class="lol" href="javascript:void(0)"onclick="window.open('boxers/paul.html','welcome','width=600,height=600,menubar=yes,status=yes')"></A>
But with no luck. Appreciate some help thanks. Hello .. First I must say "Excuse me" if I posted in a wrong room...... I searched many threads for some information regarding the best programming technologies for displaying an image slideshow on a home page. Please let me know if you have any do's or dont's related to this. With some many technologies available to display an image slideshow I want to make sure I choose the right method so SE's dont stumble when indexing my site. Thank You ! Hello all, I have created a basic slideshow from dreamweaver's template provided. I want to add one link right next to the 'Next' button that says 'download full size image'. Is this possible to do without manually do it and manually pointing it to the correct file? I would appreciate any help. Thanks, Lorne im in a bind on my site. im makine a website of my snake colelction and i have tons of pictures. what im lookin for is a way to lign the pictures up as small sample images and when clicked the orginal sized oen opens up in another browser or similar. please help asap. Hello Everyone I'm having trouble putting a picture code on my myspace page, what I'm trying to do is put the picture above the advertisments and I got the code just how I want the picture to display but the only problem is, is that the picture will display under "Preview Profile" but after saving the changes and then viewing my profile it doesn't show the picture but still has the space above to where the picture would actually be? Here's the code that I'm using: <style type="text/css"> body{ background-position:top center;margin-top: 650;} div.topbanner { top: -990; left: 25%; margin-left: --200px; width: 100%; height: 150px; position: absolute; } </style> <div class="topbanner"><a href="http://www.yourpimpspace.com"><img src="http://i80.photobucket.com/albums/j174/skinny120/Clouds.jpg" border="0"></a></div><a target="_blank" href="http://www.yourpimpspace.com/"><img border="0" src="http://www.yourpimpspace.com/support.gif" alt="MySpace Layouts" style="left: 0px; position: absolute; top: 0px" /></a><a href="http://www.yourpimpspace.com/" target="_blank" style="position:absolute; right:0px; top: 35px;">MySpace Layouts</a> <a href="http://www.yourpimpspace.com/" target="_blank" style="position:absolute; right:0px; top: 50px;">MySpace Codes</a> <a href="http://www.yourpimpspace.com/" target="_blank" style="position:absolute; right:0px; top: 65px;">MySpace Backgrounds</a><br><center><a href="http://www.yourpimpspace.com">PUT AN IMAGE AT THE TOP OF YOUR PAGE</a></center><br> Here's the pictures URL that I'm using for the Image: http://i80.photobucket.com/albums/j1...120/Clouds.jpg Please try and help Thanks Can someone please try and help me with this code. I'm trying to center text below this image with a certain color. Here are the codes and text: Image Code: <style> body div td td {height:700px; vertical-align:top; background-image:url(http://i80.photobucket.com/albums/j1...-2007-14.jpg); background-repeat:no-repeat; background-position:center top;} td.text td, td.text div td td {background-image:none; height:auto;} </style> Color Code: <p style="color:FFFFFF;"> The Text: Many a man curses the rain that falls upon his head, and knows not that it brings abundance to drive away the hunger. Thanks for the help I'm a total beginner when it comes to HTML. I was given some code to use for my fading rollover image which worked great but when I went to add another rollover image in my HTML doc the second did not function. I know something must be added to the <head> portion of the code in order for the new rollover to work but I can't seem to figure out what it is. My site is www.sailormoonthemovie.com/test.html. Thank you so much for your time and help! Any suggestions are much appreciated Hi Guys, I need to display a default image if a user doesn't upload one eg: :::::::::Current Code::::::: <img src="{src}" {width} {height} border="0" hspace="0" alt="{alt}"> //shows the image if a user uploads one How can i alter the code so that if a user doesnt upload one it defaults to images/default.gif Thanks I want to put two different images in my background. one on the left and one on the right. and i would like it to be fixed. can someone help me with the code? i can only get one background image. this is what im using rite now: <style type="text/css"> body { background: url(example.jpg) fixed right no-repeat;} </style> Hi, I need HTML code for image gallery like this or similar one. The most importand is the left&right arrows. Thanks for who try to help. I don't know alot about HTML. I just need a simple HTML Rollover/Hover code I can pop my image URLs into and it will work. Help? I'm using Freewebs, btw. Hi guys i just joined and hope to learn a lot from this forum! Ok, My question is if there is a HTML code to save an image as a different image. To help explain better I want to embed an original artwork image on my myspace page. I have seen other artist do this same thing where they have embedded and image onto their page and if someone uses the Right click>Save image as... to try to save that image they get a whole different image than the one they wanted to save. For example: Say you wanted to save this image and after you use the Right click> save image as... and open up the file you just saved You get this Scripts don't work with myspace so i would like to know if there is a HTML code that does this. Thanks for your time <<<Edit>>> Ok heres a better example this users profile has an image of his alias i guess in his "About Me" Section and when you try to save the image you get a 1pixel gif Heres the users page (Google cache) http://64.233.167.104/search?q=cache...lnk&cd=1&gl=us The actual image URL is : http://img71.imageshack.us/img71/880/101copyzd9.png and the 1pixel gif's URL is : http://x.myspace.com/images/clear.gif I would like to know whats the html code for this because when you try to save the imageshack image you end up downloading the 1pixel gif instead Thanks for your time |
|||||||