JavaScript - How To Create A Rotating Content Image?

Hello,

I use the following script for my rotating images with links and would like to know if there is a way to have the links display in a new window:

Code:

<script type="text/javascript">

var preload_ctrl_images=true;

//And configure the image buttons' images he 
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"];

slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"];

slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"];

slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"];

slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"];

slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"];

slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"];

slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"];

slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"];

slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
//above slide show uses only the defaults
</script>

<script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript">

</script>

Thanks for your help, Elbee

Hi,

I am working with a template I purchased that will loop a series of header images. I like to stop the image series from going back to the beginning once the series of images cycles through.

For instance, if there were 3 images in the sequence; currently the script cycles through all 3 images and then starts from the beginning. I would like the script to stop on the last image (so that image stays displayed) and not start the sequence again from the beginning. I couldn't get any support for hacking this script from the developers.

The php file that handles this operation attached below and i was told by the support forum I posted in that some Javascript skill would be needed, hence the reason for posting in this section of the forum.


Thanks for looking

Hi,

I have the following function to dynamically create an image (in this case a toolbox button):

Code:

function createButton(srcid,bttn)
{
 if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';}
 if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';}
 if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';}
 btn=document.createElement('img');
 btn.setAttribute('src','toolbox/'+s+'.gif');
 btn.setAttribute('width','16px');
 btn.setAttribute('height','16px');
 btn.setAttribute('id',bttn+'btn_'+srcid);
 btn.setAttribute('class','button');
 btn.setAttribute('name','Toolbox');
 btn.setAttribute('title',h);
 btn.setAttribute('onclick',o);
 document.getElementById('ctrlDiv').appendChild(btn);
}

which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error.
If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either.
I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly.

The style sheet for class button is:
Code:

.button
{
 position: absolute;
 left: 5;
 top: 5;
 z-index: 1;
}

(BTW, no link to a website as this is local on my machine atm)

TIA,

Gerald.

Hi,

I am in need of creating a image toolbox in a web browser using javascript. Please find the requirements below.
1) The toolbox will contain some images within it. The toolbox can be moved anywhere within the window.
2) It is possible to drag and drop a image clone from the toolbox to the window.
3) It should be possible to click on the image in the toolbox and can be placed when click on the window (at the clicked position).
4) on double clicking the image in the toolbox, the selected image should get cleared.


Please provide suggestion as well as the code snippets to achieve the requirements. Kindly reply ASAP.

Thanks,
Vinoth.K

First off I'm incredibly new to JavaScript and its likely I am going about this completely the wrong way. But gotta start somewhere.

Also my apologise if I am posting in the wrong area.


Here's my problem.
I have setup a site in CSS3/XHTML that I will use to display some of my photography (im a keen photographer)

The way my Gallery will work will be using Submenu's then there will be a table of Thumbnails which I have setup.

The part I am stuck on is that I want people to be able to click the thumbnails and then the corresponding picture held in the next folder to be displayed in a CSS defined container in the center of the page.

So clicking _Images/Thumbnails/1.gif will bring up _/Images/1.gif in the CSS container

For the life of me I cannot work out how to do it though.
Here is my code so far.



HTML ->

<td>
<a onclick="newImage" href="nogoto">
<img src="_images/Thumbnails/1.png" align="left" width="47px" height="33px" alt="1" id="1"/>
</a>
</td>


CSS ->

#mainpage {
color:#FFF;
text-align:right;
font-size:.7em;
height:365px;
width:529px;
position:relative;
top:25px;
left:35px;
}

JavaScript ->

window.onload = newImage();

function newImage() {
document.getElementById(mainpage).innerHTML = "<script>background-image:_images/1.png;</script>"
}



Obviously I want to expand on this once it works but for now I would just like to get the images to appear correctly when clicked.


Thank you so much in Advance if anyone can help.

Hi!

I'm very new to Javascript so first I want to apologize for my lack of knowledge, what I'm asking is probably really simple to do.

Im have a folder full of images. Each image is named with an incrementing number like vidseq000001, vidseq000002, vidseq000003 and so on.

I'm trying to use a jQuery plugin called "reel" to make the sequence animate. For that it seems I need to put the images inside an array.

I know how to manually enter each image inside the array like

var [
vidseq000001,
vidseq000002,
vidseq000003,
]

But this becomes quite tedious with over thousand images.

What would be a smarter way to put all my images inside an array?

Something similar to the navigation menu on http://www.gamewearteamsports.com/. You hover over a link and a box appears below that spreads the width of the menu itself. Friend of mine told me it was using actionscript but I have no idea how to create a drop down box (not menu). Any ideas? My friend told me Dreamweaver has the ability t create a drop down box but I have no idea.

Also does anyone know how to create an image slider similar to the one on that site? A slider that fades from one image to the next with the navigation arrows on the left and right side and the dots on top left?

I realy did not mean over image I ment some like

"text"<br>

then image here


there are 4 parts to this script. I am trying to change it so that there is text content over the image.

part 1

Code:

meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>


<div id="rotator">


AD One<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src=&quot;/upload/3282.jpg&quot; width=&quot;300&quot;>')\" onmouseout=\"UnTip()\"><img src="imageone.jpg" width="120" height="90" border="0" alt="2 bed/1 bath House" /></a>
Ad TWO1<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src=&quot;/upload/2485.jpg&quot; width=&quot;300&quot;>')\" onmouseout=\"UnTip()\"><img src="imagetwo.jpg" width="120" height="90" border="0" alt="CSS Beauty" /></a>
</div>

the "AD ONE" and "AD two" Content above is what I would like to show up over the image and roate with it.

I think I just need to change something in part 4 of the code but not sure were.


part two


slideshow1.css

Code:

*
{
	margin: 0;
	padding: 0;
}

#rotator
{
	border: 1px solid #000;
	cursor: pointer;
	overflow: hidden;
	margin: 50px auto 10px;
	position: relative;
	width: 120px;
	height: 90px;
}

#rotator img
{
	border: 0;
	cursor: pointer;
	width: 120px;
	height: 90px;
}

p
{
	text-align: center;
}

part 3

slideshow2.css

Code:

#rotator img
{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

part 4

xfade2.js

Code:

/*
	Image Cross Fade Redux
	Version 1.0
	Last revision: 02.15.2006
	steve@slayeroffice.com

	Rewrite of old code found he  http://slayeroffice.com/code/imageCrossFade/index.html
*/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

imgs = d.getElementById('rotator').getElementsByTagName('img');
	
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;

	setTimeout(so_xfade,3000);
}

function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

Hey guys, Im creating a javascript content expander and would like to know how to create it so it changed the image from an down arrows to open the box, and a down arrow to close the box.

Here is my current code.

Code:

<script type="text/javascript">
//var persistmenu="yes"
var persisttype="sitewide" 

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
        if(el.style.display != "block"){ 
            for (var i=0; i<ar.length; i++){
                if (ar[i].className=="submenu")
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        }else{
            el.style.display = "none";
        }
    }
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}


if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>

<style type="text/css">
.sectionHeadernews .plaquenews {
 background: url(../layout/section_header_plaque_medium.png) center no-repeat;
}

.sectionHeadernews .plaquenews, .sectionHeaderchat .plaque_medium, .sectionHeaderchat .plaque_large {
 height: 26px;
 text-align:center
 overflow: hidden;
 line-height: 25px;
 font-size: 14px;
 font-family: Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times, serif;
 font-weight: bold;
 font-variant: small-caps;
 color: #30291f;
}

.sectionHeadernews {
 background: #bd9c5a url(../layout/section_header_bg.png) top repeat-x;
 width: 754px;
}

.sectionHeadernews .leftnews {
 background: url(../layout/section_header_left_news.png) left no-repeat;
}

.sectionHeadernews .rightnews {
 background: url(../layout/section_header_right_news.png)  right no-repeat;
}
</style>


<div class="sectionHeadernews">
<div class="leftnews">
<div class="rightnews" onclick="SwitchMenu('sub1')" >
<div class="plaquenews">
Click to view current website news
</div>
</div>
</div>
</div>

I want the <div class="rightnews"> thing to change from an up arrow to a down arrow.

Here are the icons im using.
For the box to contract:

for the box to expand.

If someone could help me out by adding the code so the images switch would be great!

Hi,

I am trying to have an array of pictures rotating among them every 300 milliseconds.

I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place.

I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position.

There is my code:

Code:

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hexagonal array</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

	function shiftPix(element, count, index) {
		var pi = 3.1415926535; 

		// left: x coordinate, top: y coordinate
		y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
	  	x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);


	  	element.style.left = x + "px";
	  	element.style.top = y + "px";

	}

	function display() {

	  	for (j = 0; j < 6 ; j++) {			
			setTimeout("shiftPix(" + x + ", " + y + ")", 300);
			counter++;
			shiftPix(pixArray[j], counter, j);
		}
				
		
	}
	// -->
</script>
</head>

<body>

  <h3>Hexagonal Array </h3>


  <div id="John" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg" alt="John Santore" width="90" height="120" />
  </div>
  <div id="Seikyung" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
  </div>
  <div id="Glenn" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
  </div>
  <div id="Lee" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
  </div>
  <div id="Abdul" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
  </div>
  <div id="Toby" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
  </div>

  <script type="text/javascript">
	<!--
	  var counter = 0;

	  pixArray[0] = document.getElementById("John");
	  pixArray[1] = document.getElementById("Seikyung");
	  pixArray[2] = document.getElementById("Glenn");
	  pixArray[3] = document.getElementById("Lee");
	  pixArray[4] = document.getElementById("Abdul");
	  pixArray[5] = document.getElementById("Toby");

	  display();
	// -->
  </script>
</body>
</html>

I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script:

Code:

<!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);

index = Math.floor(Math.random() * images.length);

document.write(images[index]);
// -->

Where does the index come from? And how do I interpret images[index] if I were to read it out loud?

I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks!

Hello,

I'm looking for an option for a rotating banner on a website.

I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed.

Is this possible?

Hi
I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc

Code:

<script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";


var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;


//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}

</script>

Hi, I've create a jquery accordian using the code provided in the main accordian page. It all works brilliantly, except when I try to show an image that will link to another page, the image does not show.

For example, In one of the accordion content areas, the code shows:

Code:

<div> <h3><a href="#">How can I get a price quote?</a></h3> <div>Simply click on the button below to open up Power Image's all-inclusive Quick Quote tool, then follow the prompts to enter your style, color, ink colors, and quantity. <img src="images/quote.png" width="100" height="30">When you're done, click "Total" to see your all-inclusive price! Additionally, once you get a quote in the Design Center, your price quote updates live under your design as you create.</div> </div>

When clicking on the header to open the content however, the image does not show. I have checked the location of the image multiple times, and it is right. There isn't even a broken image that shows where the image should be. What code do I need to add to allow images to be inside the content area of accordions?

A full description of the problem, all the code and the test is also posted on:

http://happinesshabitS.com/testroto4.htm

I am trying to install a rotating banner on http://HappinessHabit.com

How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked.

I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com

The code I placed on the test page is:

Code:

<script type="text/javascript" src="jshdrotate-1.js" ></script>
</head>

and

Code:

</head>
<body onLoad="preloadImgs();randomImages();">
<img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a>

Can I place this right above the </body> tag?

The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below:

Code:

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }
}

function randomImages(){
  if(counter == (imgs.length)){
    counter = 0;
  }
  MM_swapImage('rotator', '', imgs[counter++]);
  setTimeout('randomImages()', delay);
}

Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies.

Did I post and describe what I am trying to do and the problem correctly?

Many thanks!