Learn VBA & Macros in 1 Week!

JavaScript - Random Images In Gallery On Reload

Full Excel VBA Course - Beginner to Expert

Random Images In Gallery On Reload	View Content

hi

i would like to create gallery of 6 images that will show random images on page reload without repeating them. am not good in js so any help would be great.
i found some code on web, just changed path for images and added lightbox code. it looks like this, but it shows same image few times.

Code:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/gallery/1.jpg"
myimages[2]="images/gallery/2.jpg"
myimages[3]="images/gallery/3.jpg"
myimages[4]="images/gallery/4.jpg"
myimages[5]="images/gallery/5.jpg"
myimages[6]="images/gallery/6.jpg"

for (i = 0; i < 6; i++) {
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href="'+myimages[ry]+'" rel="lightbox"><img src="'+myimages[ry]+'">')
}
//-->
</script>

thanks

Full Excel VBA Course - Beginner to Expert

Images In Gallery Popups Do Not Show In Ie

Similar Tutorials

View Content

I have several 'galleries' for each artist on my website. Clicking on each thumbnail opens a popup window with a larger image and details. It works fine on all the browsers except IE. What do I need to add/subtract/alter so that it works in IE? Tried to find the solution with the other threads, but without success. Here's the website:
http://artsenses.co.uk

I will be eternally thankful for any help!

Problem With Images Not Showing In Java Gallery

Similar Tutorials

View Content

Posted this in the wrong forum earlier.

I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads.

Any help would be appreciated.

Photo Gallery Images Not Reappearing After Being Hidden

Similar Tutorials

View Content

I am having a problem with making the images come back after they are hidden by the hide me css.

Html Code:

<div class="photo_container">
<div class="sorting">
<div>
<span>Filter photos by</span>
<a class="sortLink selected" data-keyword="all" href="#">All categories</a>
<a class="sortLink" data-keyword="creative" href="#">Creative</a>
<a class="sortLink" data-keyword="portrait" href="#">Portrait</a>
<a class="sortLink" data-keyword="event" href="#">Event</a>
<a class="sortLink" data-keyword="advertising" href="#">Advertising</a>
<a class="sortLink" data-keyword="nature" href="#">Nature</a>
<a class="sortLink" data-keyword="architecture" href="#">Architecture</a>
<a class="sortLink" data-keyword="model" href="#">Model</a>
<a class="sortLink" data-keyword="food" href="#">Food</a>
<div class="clear-fix"></div>
</div>
</div>
<div class="photos">
<div class="thumbnail_container">

<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a>
<a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a>

</div>
</div>
<div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div>
<div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div>
</div>

Javascript Code:

var thumbnailSpacing = 15;

$(document).ready(function(){

$('.photo_container .sorting a.sortLink').on('click', function(e){
e.preventDefault();
$('.photo_container .sorting div a.sortLink').removeClass('selected');
$(this).addClass('selected');

var keyword = $(this).attr('data-keyword');
alert(keyword +' keywordset sort link');
sortThumbnails(keyword);
});

$('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px');
$('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe');

positionThumbnails();
});

function sortThumbnails (keyword){
//alert(keyword);

$('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){
var thumbnailKeywords = $(this).attr('data-keywords');
//alert(thumbnailKeywords +' keyword thumbs');
if(keyword == 'all'){
$(this).addClass('showMe').removeClass('hideMe');

}else{
if(thumbnailKeywords.indexOf(keyword) != -1){
//alert(thumbnailKeywords.indexOf(keyword) +' index keyword');
$(this).addClass('showMe').removeClass('hideMe');
}else{

$(this).addClass('hideMe').removeClass('showMe');
}
}
});

positionThumbnails();
};

function positionThumbnails(){

/* debug */ $('.debug-remainder').html('');

$('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){
$(this).css({
'display':none,
'top':'0px',
'left':'0px'
});
});

var containerWidth = $('.photo_container .photos').width();
var thumbnail_R = 0;
var thumbnail_C = 0;
var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing;
var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing;
var max_C = Math.floor(containerWidth / thumbnailWidth);

$('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){
var remainder = (index%max_C)/100;
var maxIndex = 0;
/* debug */ $('.photo_container .debug-remainder').append(remainder+' - ');

if(remainder == 0){
if(index != 0){
thumbnail_R += thumbnailHeight;
}
thumbnail_C = 0;
}else{
thumbnail_C += thumbnailWidth;
}

$(this).css('display','block').animate({
'opaciry':1,
'top':thumbnail_R+'px',
'left':thumbnail_C+'px'
}, 500);

var newWidth = max_C + thumbnailWidth;
var newHeight = thumbnail_R + thumbnailHeight;
$('.photo_container .photos .thumbnail_container').css({
'width': newWidth + 'px',
'height': newHeight + 'px'
});
});
}

Thank you ahead of time for any help given... my brain hurts!

Non Repeating Random Images

Similar Tutorials

View Content

Hi I'm new to this and would like some help.

I want to display 4 random images and I would like to get them to NOT repeat themselves. Any suggestions? So if image one is randomly selected as "aceclubs.png" I don't want image two to be the same and so on for the other images.

This currently the code I'm using right now. I've been duplicating this function with different names for each of the 4 images. However it sometimes produces two of the same image and I don't want that.

Code:

function random_ace()
{
	var cardace = new Array(4)

	cardace[0] = "aceclubs.png";
	cardace[1] = "acediamonds.png";
	cardace[2] = "acehearts.png";
	cardace[3] = "acespades.png";

	var randomace = Math.floor(Math.random()*cardace.length);

	var ace = cardace[randomace];

	card1.src=ace
}

Cycling Images With A Random Start

Similar Tutorials

View Content

I basically want a random image to show up on my webpage and start scrolling through more images i've set to that list.

Here's what I have thus far. However, It'll always start by bringing up the same image and then change to an error image:

Code:

<html> 
<head> 
<script type="text/javascript" language="javascript"> 
<!-- Hide script from old browsers 

adImages = new Array("http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg","http://i155.photobucket.com/albums/s298/Connorconway/Halloween_Blu_Ray.jpg")
imgCt = adImages.length 
firstTime = true 

function rotate() { 
if (document.images) { 
if (firstTime) { 
thisAd = Math.floor((Math.random * imgCt)) 
firstTime = false 
} 
else { 
thisAd++ 
if (thisAd == imgCt) { 
thisAd = 0 
} 
} 
document.myPicture.src=adImages [thisAd] 
setTimeout("rotate()", 3 * 1000) 
} 
} 

//--> End hiding script from old browsers </script> 

</head> 

<body onload="rotate()"> 

<img src="http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg" width="400" height="300" name="myPicture" alt="Ad Banner" /> 

</body> 
</html>

Here's the Website I'm having problems on (So you can visually see what I mean - Under "TV ManiaX Home Page sub-heading): http://tvmaniax.myfastforum.org/index.html

Thank you for any help you can give
_________________

Random Non-repeating Images Script

Similar Tutorials

View Content

Random non-repeating images script.

Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats.

In your html page
in head tag
Code:

<style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>

in body tag (place whereever in the body you want the pictures to show)
Code:

<script type="text/javascript"> 
randomorder(ps3ba, '') 
</script>

In a seperate .js file in the same folder (this one I have as ps3boxart.js)
Code:

var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu  A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'

function randomorder(targetarray) {
  var randomorder=new Array()
  var the_one
  var z=0
  for (i=0;i<targetarray.length;i++)
  randomorder[i]=i

  while (z<targetarray.length) {
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
      document.write(targetarray[the_one])
      targetarray[the_one]="_selected!"
      z++
    }
  }
}

Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9).

Hope this helps somebody. Good luck.

Random Rotation Of Groups Of Images. Please Help!

Similar Tutorials

View Content

Hi guys!

I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster.

Here's the script from html page:

Code:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">

<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>

<script>

var interval = 4 * 1; // Seconds between change

var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}

for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 1000);
};

fade();
</script>

</body>

So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time?

Thanks for help!

Script To Diplay Random Images.

Similar Tutorials

View Content

I am stuck on some javascript homework I realize it is probably really easy but my stupid textbook is not clear on one point. I have to access code in an external javascript page (random.js) which I have done. But then i have to create a second script element to create the function showlmg() and within that I require statements to declare a variable named imgNumber equal to the value returned by the randomInteger() (which is from the external sheet found in data files from the textbook therefore I know they are right). I am supposed to use 9 as the value of the size parameter in the randomInteger() function. The second statement should be command that writes the following text to the document: <img src='imgNumber.jog' alt= ' '/>. So basically the coding I have done is :

Code:

<script type= "text/javascript" src= random.js"> </script>
<script type="text/javascript">
        function showlmg() {
		
		var imgNumber= randomInteger(9);// Return a random number from 0 to 9.
		document.write("<img src='imgNumber.jpg' alt=''/>");
		}
     </script>

all in the head of the document and then
Code:

function randomInteger(size) {
   return Math.floor((size+1)*Math.random());} from the external file.

and

Code:

<tr>
   <td colspan="2" class="center">
   <script type= "text/javascript">
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   </script>
   </td>
</tr>

to post in a table on the page... I believe the issue is in the declaring a variable the is equal to the result of the function random integer which the text book or anywhere that I can find online fails to explain how to do. Thank you.

Multiple Random Images Using Javascript

Similar Tutorials

View Content

Hi,

I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css.

A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order.

The code I currently have for the game is here..

//CODE//

var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'],
TheScore = 0,
TimerLength = 2500,
GameTimer,
ScoreMap = {
'red': 500,
'yellow': 50,
'green': 30,
'blue': 20,
'orange': 5
};

function DrawRow() {

TheColorArray.sort(function () {
return .5 - Math.random();
});

var TheHTML = '<div class="row">';

var MagicColumn = Math.floor(Math.random() * 6);

for (var i = 0; i < 5; i++) {

if (i === MagicColumn) {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';

} else {

TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';
}
}

TheHTML = TheHTML + '</div>';

return TheHTML;
}

You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png ....

i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle

Any help would be great..

Many thanks in advance!!!

Showing Random Images With Settimeout

Similar Tutorials

View Content

I'm trying to show random images with a timer of 3 seconds.

I'm still learning this (starting to :s) Any help will be highly appreciated.

The code:

Code:

<script type="text/javascript">
var imagenRandom;
var imagenSrc;
var i;
function imagenAzar(){
	imagenRandom = Math.floor(Math.random()*222);
	imagenRandom++;
	imagenSrc = "imagenes/fd/"+imagenRandom+".jpg";
	document.getElementById('imagenSlideShow').src=imagenSrc;
}
function imagenAzarLoop(){
	i=0;
	while (i<=221) {
		setTimeout("imagenAzar()", 3000);
		i++;
	}
}
</script>
</head>
<body onload="imagenAzarLoop()">
<img src="imagenes/fd/1.jpg" id="imagenSlideShow" width="300" height="225" alt="Imagen" title="Imagen" />

Javascript Random Images Does Nor Work In Ie

Similar Tutorials

View Content

Hi All.

I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now.

I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here.

I have attached the code here for you and also the html file.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<style type="text/css">
<!--
#myFlash {
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	left:0;
	right:0;
	z-index:20;
}
-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
		<script type="text/javascript" src="crossfade.js"></script>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
		</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
	filter:alpha(opacity=40);
	-moz-opacity:0.40;
	-khtml-opacity:0.40;
	opacity:0.40;
	width:100%;
	height:100%;
	position:absolute;
	margin:0;
	padding:0;
	left:0;
	right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>


<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');


//  End -->
</script>
</head>

<div id="myFlash">	
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
				<param name="movie" value="experts-connectwebsite.swf" />
				<param name="quality" value="high" />
				<param name="scale" value="exactfit" />
				<param name="wmode" value="transparent" />
				<param name="allowfullscreen" value="true" />
				<param name="allowscriptaccess" value="always" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
					<param name="quality" value="high" />
					<param name="scale" value="exactfit" />
					<param name="wmode" value="transparent" />
					<param name="allowfullscreen" value="true" />
					<param name="allowscriptaccess" value="always" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
//  End -->
</script>

<!-- Script Size:  1.49 KB -->

</body>
</html>

There is also a flash file embedded into this document!

Any help would be great with this.

Thank you, Mark

Generating Random Images With No Repeats

Similar Tutorials

View Content

I want a certain amount of image spots to show a certain set of images (specifically 8) in a random order every time the page is refreshed. I do not want the images to be repeated, however. The solution I came up with was to create an array and generate a number one to eight and then compare that number to the numbers previously in the array, and if it matched one that was previously generated, to generate a new number and then compare it. This continues until i have an array of the numbers 1-8 in a random order.
Code:

	var imgs=new Array(8);
	for(i in imgs)
	{ 
		function generate()
		{
			return Math.floor(1+Math.random()*8);
		}

		var rand=generate();

		function compare(i)
		{
			for(var n=i-1; n>=0; n--)
			{ 
				if (n<0)
				{
					imgs[i]=rand;
				}
				
				else
				{
					if (rand==n)
					{
						rand=generate();
						compare(i);
					}
				}
			}
		}
	}

This does not strike me as the most efficient way to go about this. If someone has a better solution, that would help a great deal.

General Random Image Generator For 6 Images

Similar Tutorials

View Content

Hi could someone please help?... I am a total beginner to javascript... but does anyone know of a code, including links to an image folder, for displaying 6 fullscreen images in random order without repeat for a given user?

I've seen specific examples using shuffle on the site, but could anyone write a general code for any given images?

Many thanks in advance

Pagination/gallery Js For "zoomable" Images

Similar Tutorials

View Content

Hello all,

I need some help with pagination on the web page that am working right now. There are images(more than 50) on this page which I want to show as gallery. Each image has few details about the photograph beside it. Right now all these images and details are shown in a single page one after the other with div's and am setting these div tags using JS array.

I have found several javascripts in google which can do pagination/ gallery for simple images. But my problem is these are not simple images but zoomable images. So when am using these scripts my first zoomable image is shown properly. But from next image, the details of the photo are changing but my zoomable image is not loading.

I am fairly new to JS. It would be great if someone can point in right direction. I am exploring Spry Widgets to do this but wanted to know if there is any other simple or better way to do it.

Thanks in Advance,
Shravanthi

How To Prevent Repeating In A Random (math.random) Array?

Similar Tutorials

View Content

I've looked for a solution to this issue, but it seems like a little different scenario than other situations.

I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating.

Here's my current code:
Code:

<script type="text/javascript">
var vip_list=new Array(
	new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
	new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
	new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'),
        new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'),
	new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'),
     new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'),
     new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'),
     new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'),
     new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'),
     new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'),
     new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'),
     new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257')
);

var chosen_vip=Math.floor(vip_list.length*Math.random());
var chosen_vip1=Math.floor(vip_list.length*Math.random());
var chosen_vip2=Math.floor(vip_list.length*Math.random());
var chosen_vip3=Math.floor(vip_list.length*Math.random());
var chosen_vip4=Math.floor(vip_list.length*Math.random());
var chosen_vip5=Math.floor(vip_list.length*Math.random());
var chosen_vip6=Math.floor(vip_list.length*Math.random());
var chosen_vip7=Math.floor(vip_list.length*Math.random());
var chosen_vip8=Math.floor(vip_list.length*Math.random());
var chosen_vip9=Math.floor(vip_list.length*Math.random());
var chosen_vip10=Math.floor(vip_list.length*Math.random());
var chosen_vip11=Math.floor(vip_list.length*Math.random());
var chosen_vip12=Math.floor(vip_list.length*Math.random());
var chosen_vip13=Math.floor(vip_list.length*Math.random());
var chosen_vip14=Math.floor(vip_list.length*Math.random());
var chosen_vip15=Math.floor(vip_list.length*Math.random());
var chosen_vip16=Math.floor(vip_list.length*Math.random());
var chosen_vip17=Math.floor(vip_list.length*Math.random());

document.write('<center>');
document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>');
document.write('<br>');

</script>

Any suggestions?
Thank you!

Getting One Div To Reload Another Div

Similar Tutorials

View Content

This is my dilemma and I am not sure if I am handling the right way, so please suggest a new way or provide a valid answer so that I may achieve my goal. Thanks in advance for your help in solving this matter.

In short I have a single "A.html" page that uses AJAX to reload in "B.php" into a <DIV id='bDiv'> every second and "C.php" into another <DIV id='cDiv'> with no reloading.

The code in B.php generates a random number between 1 and 100.
If the number generated is less than 10, I want <DIV id='cDiv'> to refresh its content.

I have tried a number of tricks, I could not find anything in jQuery so if there is please point me to the correct function calls.

Image Reload Help

Similar Tutorials

View Content

hello im working on my senior design project for my electrical engineering class. and part of the project is to upload an image via php (which ive written and it works great) but when the image is loaded into the same directory as the html file (which is supposed to display the image everytime a new image is uploaded) the image stays the same it doesnt show the new image. but i kno the new image has been uploaded because i can see it my web server. this is the code

Code:

<html>
<head>
	<title>Human Cam</title>
	<script type = "text/javascript">
		function refresh() {
			var refreshTime = 5*1000;                //5000ms
			var thisImage = "Lighthouse.jpg";	//the image location
			var today = new Date(); 		//the current time 
			//add the time to the end of the image string
			//to make a unique url:
	document.images["pic"].src=thisImage+"?"+today;
	//reload if the images are loaded:
	if (document.images) {
	window.onload=refresh;
	}

	//IF the time is up reload the image
	t=setTimeout('refresh()', refreshTime);
	}
  </script>
  </head>
<body onload="refresh()">
	<center>
		<h2>human cam</h2>
<img src="Lighthouse.jpg" id="pic">
  </center>
</body>
</html>

How To Reload A Page Once Once?

Similar Tutorials

View Content

I have a index page on which there are several iframes which point to pages from a tomcat server. Sometimes when the index page loads, most of the iframes display session expired error. When I refresh the page, all iframes load properly. I want to
reload the page twice whenever I come to that page initially. I also want to reload that page twice when I come to it from another page. Any ideas are welcome.

I have tried the following in the onload event

-----------------
if(window.location.search.indexOf('reload')<0) window.location.replace(window.location.href+'?reload');

---------------

function loaded()
{ if (!navigator.fudge) {
navigator.fudge = 0;
}
navigator.fuge++;
if (navigator.fudge>1){navigator.fudge=0}
else{location.reload()};
}

-------------

if(readCookie('reloaded')!='Yes')
{
createCookie('reloaded','Yes',1);
window.location.reload();
}
else
eraseCookie('reloaded');

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/"; }

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

---------------------------
several meta tags to get the page each time from the server

e.x.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

Onload Reload() Revisited

Similar Tutorials

View Content

Hey guys,
I have read the past posts and I see that there have been some other people who have had issues with resetting a form.

Right now - on this mess in progress - I have a function that runs on body load:

Code:

function load ()
{
	document.forms[0].reset();
}

I know it is running because originally it was an alert, but this is not clearing the form. I need to get all checkboxes and fields to clear. I have also tried:

Code:

function load ()
{
	document.getElementById("regForm").reset();
}

No dice.
Any idea what I am missing?

The temp page is he
http://www.temp1.hangnailproductions...ISTRATION2.php

My script is he
http://www.temp1.hangnailproductions...egistration.js

Thanks guys, sorry if things are clunky and sloppy, I'm doing my best but still pretty bad.
-AJ

Need Help Creating A Cookie With A Different $value On Reload

Similar Tutorials

View Content

Hi,
i'm not sure this is the right spot for my question ,but i will try. ( sorry if not )

I need to create a script, that sets cookie ,named "something" with a random $value - something(1-500) every time the user refreshes his browser.

Something like this :
Y.Node.get("#Button1").on("click", function(){
var newValue = "something" + Math.round(Math.random() * Math.PI * 500);
Y.Cookie.set("$something", newValue);
Y.log("Set cookie '$something' to '" + $something + "'");

But when i refresh the browser the cookie must be with a new Value.

I will explain more clearly :
I hit Button 1,
Activate this script,that sets me the cookie named "something" with a $value for example , something55
I refresh my browser,the same cookie has $value for example something98

Thanks in advance,
Regards,
Anton

P.S. i'm trying to make it work for a few days .so i will be very glad if someone could help me here .