|
HTML - Image Slideshow Without Flash
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? Similar TutorialsHey guys I'm really stumped I'm just starting this project and so far all I have is a javascript/css drop down menu I'm tweaking and a flash slide show. Right now I'm having 2 problems. #1 my menus are getting overlapped by the flash, I keep trying a z-index on the div I have in the flash, but it isn't working. #2 I'm having problems positioning the div which the flash is contained by. For example I tried centering the div with css and it was to no avail. I had to put <center></center> around the whole div to achieve this. If anyone could help that would be amazing, check out www.atlanta-web.com Thanks, 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 How do I make a slideshow where images roll and when clicked on go to another page? 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. 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 ! Hey, this is my first post, so I will try to be as detailed as possible. I know what I want to design, I just don't know the program to use, the file type, whether I need frames... I am new with HTML Code, CSS and Java, I have a graphic design degree focusing on image, type and layout, and very little web design. I would like to design a facebook fan page with this: http://www.htmlforums.com/attachment...7&d=1317248556 I want the header and the image slider to remain loaded and locked at all times on the page, while the slide title/number, main image, and main text FADE in seperately, when the appropriate numbnail is selected. I do not want it as a slide show, it is more of a self-guided informational tutorial. I want the image slider to be able to scroll as well. If anyone knows tutorials or websites that could help me, or have suggestions reproducing this, please let me know. Do I do this as Flash? What type of file? I have searched the internet for days looking for a tutorial that is close to what I want, and I am having no luck. I really don't even know what to call this, inorder to properly google it. Thanks in advance! Greetings. I have tried for nearly 10 hours total. But I can't get this to work. What I'd like to do is place a small image on the top right (or left) corner of a flash video. A watermark of sorts. I have seen sites do this, such as this. http://www.coolsport.tv/kiwi2.php I'd like to have my image, over my flash video. I know it has to do with setting transparency as well as positioning the image - however I simply don't understand it. This is the image, http://leboss.batcave.net/lebossover.png This is the flash I would like to place it over, http://leboss.batcave.net/channels/chan1.html Anyone have a clue? I appreciate the help. Warning. If you have firefox and ad block plus, you shouldn't get ad's on the sites linked. If you don't, you may see some ad's which aren't malicious. The flash server host (ilive.to) put's those stupid ad's. Thank you again. Hi. Not sure if this should go in HTML thread or FLash Dev, but here goes.... I have made some movies in flash, but i understand that people with old versions of flash player, will not be able to see them. Is it possible to show an image instead of the flash movie if the recommended flash player is not installed?? i.e. my movies are 320px height and 426px wide, if the flash player is not installed i would like to show a photo (320px * 426px) instead. Thanks Leroy http://www.firstpentecostalchurchlc.org/ The website above does this, but how? it doesn't use flash either.. How can I do this? Thanks a lot guys.. Hi, I want to add some flash to my header image on my website. Before i add the flash i was wondering if there was any code i could use to first check if flash is installed and if not for it to just ignore the flash and load the background image. The flash is just going to be an animation of my logo. Is there something i can do similar to when you use code to check for browser version? If the person has not got flash installed i don't want them to be promted to install it i just want it to load the static logo image which will be set as the background image behind the flash. For people with flash already installed i would like the flash annimation to load. Any ideas on if this is possible would be appreciated Thanks in advance CC_DESIGN 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 Is there any way of placing HTML buttons (not flash) over Flash swf movis on Dreamworks? Thanks I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head>
<title>iSwim</title>
</head>
<body>
<div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;">
<object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object>
</div>
</body>
Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How? Thanks I want to create a slideshow, with the pictures rotating at the bottom of my webpage. However, when the page changes it jumps back to the top of the page. Does anyone know how to prevent this? Thanks. below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>try5</title> </head> <body> <script type="text/javascript"> // Author: ricocheting.com // Description: slideshow that allows visitors to flip through a series of images on your website var x=0; function rotate(num){ fs=document.ff.slide; x=num%fs.length; if(x<0) x=fs.length-1; document.images.show.src=fs.options[x].value; fs.selectedIndex=x;} function auto() { if(document.ff.fa.value == "Stop"){ rotate(++x);setTimeout("auto()", 5000);}} </script> <form name="ff"> <table style="border: 1px solid black; border-collapse: collapse;" cellpadding="3"> <tbody> <tr> <th align="center"></th> </tr> <tr> <td align="center"><img src="IMG0.JPG" name="show"> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"> <select name="slide" onchange="rotate(this.selectedIndex);"> <option value="IMG0.JPG"></option> <option value="IMG1.JPG"></option> </select> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"><input onclick="rotate(0);" value="ll<<" title="Jump to beginning" type="button"> <input onclick="rotate(x-1);" value="<<" title="Last Picture" type="button"><input name="fa" onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width: 75px;" type="button"> <input onclick="rotate(x+1);" value=">>" title="Next Picture" type="button"><input onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" type="button"> </td> </tr> </tbody> </table> </form> </body> </html> <div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view¤t=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div> This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me? Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as. Here is what I'm struggling with: I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created. Buttons I want changed too (<)Left button =http://i40.tinypic.com/mrftlc.jpg (>)Right button =http://i39.tinypic.com/5wuo5.jpg I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg Here is the Code: Code: <!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
///// Plugin variables
playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps) PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above. We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response. Thx. |
|||||||