|
JavaScript - Changing Captions With Pictures, Captions Not Working
Hi all,
For this page he http://morrish.juiceserver.co.uk/plo...=136&prop_id=9 I have the following code for the photo gallery: Code: var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){
var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}
function init(){
var nImg = document.getElementById('fullSizeContainer');
//if (!nImg) return
var fullSizeImg = nImg.getElementsByTagName('img')[0];
//if (!fullSizeImg) return
nCaption = nImg.getElementsByTagName('div')[0];
IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
//var nGall = document.getElementById('photoGallery');
//var nGallery = nGall.getElementsByTagName('a');
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
nCaption.innerHTML = this.firstChild.alt;
return false;
}
nGallery[i].href = "#";
}
}
IE ? attachEvent('onload', init) : addEventListener('load', init, false);
The pictures change fine, but I can't get the captions to change with them. Any help anyone can give would be massively appreciated Similar TutorialsI just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: www.equisearch.com. I like the features area on this website. Here is my code so far: Code: <html>
<head>
<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'],
['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'],
['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>'] // Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",3000);
}
</script>
</head>
<body>
<div style="width:300;text-align:left;margin-left:auto;margin-right:auto">
<div id="Caption" class="duh"></div>
<img src="http://i200.photobucket.com/albums/aa216/Jilldear/pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
<br />
</div>
</body>
</html>
Hello I'm trying to setup and image slideshow with captions. I can't it to work so far. Can someone help me. Here is a code snippet: Javascript var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '1.gif' Pic[1] = '2.gif' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } Html <body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()"> <img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" /> Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php
Hello all, Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed. Here is the javascript: Code: var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
Here is the HTML, which I have enclosed within a div box positioned absolutely on the page: Code: <ul id="gallery"> <li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li> </ul> And here is the CSS: Code: /* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 170px; }
#jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
#capt
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received. Hello coding world, After hours of searching the net I found this awesome slideshow. Check it out: http://tympanus.net/codrops/2011/01/...comment-409563 I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image. Can anyone help me out? Please. Thanks in advance. Best regards, Alan Hello, I have 4 pictures (Picture_1, Picture_2, Picture_3, Picture_4) and 2 buttons. I am trying to make it so that when you click the 'next picture' button it increments a variables andchanges the current picture to the next one ("Picture_" + CurrentPicture) I am aware that I would need to delete the current picture before creating the next one but I am unsure how to do this I use document.write("<img src = 'Picture_Example'>") to display my picture but if there is a better way please say Here's all my code: Code: <html>
<head>
<script language = "javascript" type = "text/javascript">
CurrentPicture = 1
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
function ChangeImage(Rotation){
Current_Picture ++
if(Rotation == 1){
if(CurrentPicture != 1){
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
}
}else if (Rotation == 2){
if(CurrentPicture != 4){
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
}
}
}
</script>
</head>
<form>
<input type = "button" value = "Next Picture" onClick = "ChangeImage(1)">
<input type = "button" value = "Previous Picture" onClick = "ChangeImage(2)">
</form>
</body>
</html>
Thanks. Hello I have header made from 3 parts (becouse its not rectengular) So 3 pictures build one header and 3 headers are changing every 10s. I have some code but works only on 1 part, i dont know how to add other 2 is this posible? Code: <head>
<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
</head>
<body>
<a href="javascript:gotoshow()"><img src="images/header_main.gif" name="slide" border=0></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/header_main.gif", "images/header_main_cv.gif", "images/header_main.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
Hey everyone, I am normally very good at debugging these kinds of things but I've had a long day and am obviously overlooking something very, very simple. If anyone can spot it that would be fantastic. JavaScript Code: <script type="text/javascript">
function toggle (id) {
if (document.getElementById('sub_' + id).style.display == 'none') {
document.getElementById('sub_' + id).style.display = '';
document.getElementById('icon_' + id).src = 'images/collapse.gif';
} else {
document.getElementById('sub_' + id).style.display = 'none';
document.getElementById('icon_' + id).src = 'images/expand.gif';
}
}
</script>
HTML Code: <div id="sub_0"><div style="padding-left: 0px;"><img src="images/point.gif"> Biology</div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=4">Chemistry</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=5">Earth/Space</a></div>
<div style="padding-left: 0px;"><img src="images/expand.gif" id="icon_6" onclick="javascript:toggle('6');" title="Click to Expand/Collapse"> <a href="products.php?cid=6">Physics</a></div>
<div id="sub_6" style="display: none;"><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=10">Kinimatics</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_12" onclick="javascript:toggle('12');" title="Click to Expand/Collapse"> <a href="products.php?cid=12">Dynamics</a></div>
<div id="sub_12" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=11">Newton's Laws</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=13">Special Forces</a></div>
<div style="padding-left: 20px;"><img src="images/expand.gif" id="icon_14" onclick="javascript:toggle('14');" title="Click to Expand/Collapse"> <a href="products.php?cid=14">Momentum</a></div>
<div id="sub_14" style="display: none;"><div style="padding-left: 30px;"><img src="images/point.gif"> <a href="products.php?cid=15">Impulse</a></div>
</div></div><div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_16" onclick="javascript:toggle('16');" title="Click to Expand/Collapse"> <a href="products.php?cid=16">Energy</a></div>
<div id="sub_16" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=17">Collisions</a></div>
</div><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=21">Waves</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_18" onclick="javascript:toggle('18');" title="Click to Expand/Collapse"> <a href="products.php?cid=18">Optics</a></div>
<div id="sub_18" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=19">Mirrors</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=20">Lenses</a></div>
</div></div><div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=2">Mathematics</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=7">Fine Arts</a></div>
</div> </div>
Expected Result: The icon changes to expand or collapse based on the visibility of the following <div>. Actual Result: Shows content and changes icon to collapse but when clicking on the collapse icon the <div> does not disappear and the icon just disappears in IE. In firefox clicking on the expand icon simply causes the icon to disappear. You can view what is happening he http://www.onacd.ca/products.php It is the navigation on the left. I'm going to continue to try and figure it out - but any suggestions would be great. I'm dying here. Perhaps I need a nap. Luke I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code: Code: var current_overID = "";
var last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID, mapID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.deltavmap.src = item [current_overID].slide_img.src;
document.deltavmap.useMap=mapID;
}
}
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more
<MAP NAME="deltav">
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')" window.defaultStatus='' window.status='Engineering' return true >
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true >
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true >
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<MAP NAME="eng">
<AREA SHAPE="RECT" COORDS="38,52,244,75"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
window.defaultStatus=''
window.status='Batch Processing' return true
>
<AREA SHAPE="RECT" COORDS="40,82,230,103"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
window.defaultStatus=''
window.status='Control Modules' return true
>
<AREA SHAPE="RECT" COORDS="40,112,143,136"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
window.defaultStatus=''
window.status='Graphics' return true
>
<AREA SHAPE="RECT" COORDS="40,141,176,168"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
window.defaultStatus=''
window.status='ProtoTyping' return true
>
<AREA SHAPE="RECT" COORDS="24,224,84,234"
HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
window.defaultStatus=''
window.status='Software' return true
>
<AREA SHAPE="RECT" COORDS="24,236,124,247"
HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
window.defaultStatus=''
window.status='Documentation' return true
>
<AREA SHAPE="RECT" COORDS="25,248,76,261"
HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
window.defaultStatus=''
window.status='Support' return true
>
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
... many others
Can any one tell me what i need to do to fix this in IE? Thanks! Fayette All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. All, I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case. An example of a similar desired result is a link he http://qrayg.com/experiment/hig/ Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well. Thanks for any guidance you could provide me on this. Thanks in advance! Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh. i found this code that refreshes the pictures: Code: <script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>
and to come up with the tables i made this code: Code: <table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>
but if you see the home page he http://celulardepot.squarespace.com you can see that something is DEFINITLY wrong lol please help me! =D I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack. I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded. the code to start the javascript is: Code: <script type="text/javascript">
$(document).ready(function(){
$('#photos45').galleryView({
panel_width: 980,
panel_height: 300,
gallery_width: 980,
gallery_height: 900,
frame_width: 120,
frame_height: 50,
pause_on_hover: true,
nav_theme: 'light'
});
});
</script>
and the html is: Code: <div style="height:360px; overflow:hidden; " > <ul id="photos45"> <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li> <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li> </ul> </div> I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he http://bit.ly/8QRXWU i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this, also can the code be easy ish for example. if show is 5pm till 6pm an image appears if show is 6pm till 7pm an image appears i know this is possible but there are so many codes out there, thank you for your help Need some help understanding why and how to fix this.... btw this site is something I've been working on for some time..... and learning bit by bit !!! this is the site : http://www.teiafirme.com/hargrave.html this is the problem : The specific problem is that when you mouse over pictures i have a script to enlarge those pics, but my menu stays on top of those pictures !!!!!!!!!!!!! what do i need to do to fix this? If needed I will post the page html code... I also have another problem which is with the flash movie on the home page which is only loading after i navigate way from the home page and then comeback to it...... Movie does not start on initial page load !!!!! Hi guys. I have been scowering high and low for code to create a Java drop down menu bar for my site. I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/ but want to insert pictures into it, for each heading, to create a new looking bar if thats possible. Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code. Thanks in advance. HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction. Many thanks Bec the code: Code: <script type="text/javascript">
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
thanks Hi there, I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough Good afternoon! I am very new to javascript and I am having trouble getting Javascript to work right. What I am trying to do is when a user clicks one of the boxes, the box will switch to a random picture (3 different ones). It is supposed to work like memory but with three of the same for a match, not just two. I am unsure if I am telling Java the right code. I am not sure if I am linking Java correctly to html. Here is my code, please help me!!! Code: <html>
<head>
<title></title>
<script language="JavaScript">
Var score= 0;
var multiplier =1;
var counter = 0; // overall counter (1..3)
var counter1 = 0; // number of times picture 1 was picked
var counter2= 0; // number of times picture 2 was picked
var counter3 = 0; // number of times picture 3 was picked
var picture1 = 1.gif
var picture2 = 2.gif
var picture3 = 3.gif
function uncover (ref)
{
if (ref.alt != "0")
return;
if (counter == 3)
if (click() )
choosePicture();
}
function choosePicture()
{
Math.random() = number;
if(number <= .33)
return picture1;
else if(number > .33) && (number <= .66)
return picture2;
else
return picture3;
}
function click()
{
}
</script>
</head>
<style type="text/css">
input { text-align: center; background: #004080; color: white }
</style>
</script>
<form>
</head>
<body>
<center>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
<tr>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
<td><A HREF="javascript:choosePicture();"><img src="0.gif"> </A>
</td>
</tr>
</table>
</center>
</body>
</html>
|
|||||||