JavaScript - Loading A Random Image With Javascript

Using the Photoslide, GK News Image VI, as seen here tools.gavick.com/demo/ni6, however its in ID order, listed.

I would like to change the order of ID to Random Order. Can you please help, what code would need changing. thank you

its javascript.

code below:

Fx.Height = Fx.Style.extend({initialize: function(el, options){$(el).setStyle('overflow', 'hidden');this.parent(el, 'height', options);},toggle: function(){var style = this.element.getStyle('height').toInt();return (style > 0) ? this.start(style, 0) : this.start(0, this.element.scrollHeight);},show: function(){return this.set(this.element.scrollHeight);}});Fx.Opacity = Fx.Style.extend({initialize: function(el, options){this.now = 1;this.parent(el, 'opacity', options);},toggle: function(){return (this.now > 0) ? this.start(1, 0) : this.start(0, 1);},show: function(){return this.set(1);}});
//
window.addEvent("load",function(){
document.getElementsBySelector(".gk_ni_6_wrapper").each(function(el){
// generowanie rdzenia
var mainwrap = el;
var elID = el.getProperty("id");
var $G = $Gavick[elID];
var wrap = $(elID);
var mouseIsOver = false;
var scrollValue = 0;


//
var addWidth = $E("div",el).getStyle("padding-left").toInt() + $E("div",el).getStyle("padding-right").toInt() + $E("div",el).getStyle("margin-right").toInt();
//
el.setStyle("width",(el.getStyle("width").toInt() + addWidth) + "px");
//
$G["actual_slide"] = -1;
$G["actual_anim"] = false;
$G["actual_anim_p"] = false;
//
var slides = [];
var contents = [];
var pasek = false;
//
if(window.ie && $E(".gk_ni_6_text_bg", wrap)) $E(".gk_ni_6_text_bg",wrap).setOpacity($G["opacity"].toFloat());
//
wrap.getElementsBySelector(".gk_ni_6_slide").each(function(elmt,i){slides[i] = elmt;});
slides.each(function(el,i){if(i != 0) el.setOpacity(0);});
//
if($E(".gk_ni_6_text_bg", wrap)){
var text_block = $E(".gk_ni_6_text_bg",wrap);
$ES(".gk_ni_6_news_text",wrap).each(function(el,i){contents[i] = el.innerHTML;});
}
// animacje
var amount_c = contents.length-1;
if($E(".gk_ni_6_text", wrap)) $E(".gk_ni_6_text",wrap).innerHTML = contents[0];
//
var loadedImages = ($E('.gk_ni_6_preloader', wrap)) ? false : true;
//
if($E('.gk_ni_6_preloader', wrap)){
var imagesToLoad = [];
//
$ES('.gk_ni_6_slide',wrap).each(function(el,i){
var newImg = new Element('img',{
"src" : el.innerHTML,
"alt" : el.getProperty('title')
});
imagesToLoad.push(newImg);
el.innerHTML = '';
newImg.injectInside(el);
});
//
var timerrr = (function(){
var process = 0;
imagesToLoad.each(function(el,i){
if(el.complete) process++;
});
//
if(process == imagesToLoad.length){
$clear(timerrr);
loadedImages = process;
(function(){new Fx.Opacity($E('.gk_ni_6_preloader', wrap)).start(1,0);}).delay(400);
}
}).periodical(200);
}

var timerrr2 = (function(){
if(loadedImages){
$clear(timerrr2);
// ----------
var NI2 = new news_image_6();
//
$ES(".gk_ni_6_tab",mainwrap).each(function(elx,index){
var hover = $E(".gk_ni_6_hover" , elx);
var opacity_anim = new Fx.Opacity(hover, {duration: 250, wait: false});
//
elx.addEvent("mouseenter",function(){
hover.setStyle("display", "block");
opacity_anim.start(1);
});
//
elx.addEvent("mouseleave",function(){
opacity_anim.start(0);
(function(){hover.setStyle("display", "none");}).delay(250);
});
//
elx.addEvent("click", function(){
if(!$G["actual_anim_p"]){
$E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab");
elx.setProperty("class","gk_ni_6_tab_active");
}
//
NI2.image_anim(elID,mainwrap,wrap,slides,index,contents,$G,false);
});
});

$E(".gk_ni_6_tab",mainwrap).setProperty("class","gk_ni_6_tab_active");
NI2.image_anim(elID,mainwrap,wrap,slides,0,contents,$G,($G["autoanim"]==1));
/** Slider implementation **/
if($E('.gk_ni_6_tabsbar_slider',mainwrap)){
var $offset = $E(".gk_ni_6_tab",mainwrap).getStyle("height").toInt() + $E(".gk_ni_6_tab",mainwrap).getStyle("margin-bottom").toInt();
var scrollArea = $E('.gk_ni_6_tabsbar_wrap', mainwrap);
var scrollableArea = $E('.gk_ni_6_tabsbar', mainwrap);
var scrollAreaH = scrollArea.getSize().size.y;
var scrollableAreaH = scrollableArea.getSize().size.y;
var scroller_up = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue -= $offset;}});
var scroller_down = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue += $offset;}});
//
$E('.gk_ni_6_tabsbar_up', mainwrap).addEvent("click",function(){
if(scrollValue > 0) { scroller_up.scrollTo(0, scrollValue-$offset);}
});
//
$E('.gk_ni_6_tabsbar_down', mainwrap).addEvent("click",function(){
if((scrollValue < (scrollableAreaH-scrollAreaH))) { scroller_down.scrollTo(0, scrollValue+$offset); }
});
}
}}).periodical(250);
});
});
//
var news_image_6 = new Class({
//
text_anim : function(wrap,contents,$G){
var txt = $E(".gk_ni_6_text",wrap);
if(txt){
if($G["anim_type_t"] == 0){
new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(1,0);
(function(){
new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(0,1);txt.innerHTML = contents[$G["actual_slide"]];
}).delay($G["anim_speed"]);
}
else txt.innerHTML = contents[$G["actual_slide"]];
}
},
//
image_anim : function(elID,mainwrap,wrap,slides,n,contents,$G,play){
var max = slides.length-1;
var links = $ES('.gk_ni_6_news_link', mainwrap);
var readon = $E('.gk_ni_6_readmore_button a', mainwrap);

if(!$G["actual_anim_p"] && n != $G["actual_slide"]){
$G["actual_anim_p"] = true;
if(readon) readon.setProperty("href", links[n].innerHTML);
var actual_slide = $G["actual_slide"];
$G["actual_slide"] = n;
slides[n].setStyle("z-index",max+1);

if(actual_slide != -1) new Fx.Opacity(slides[actual_slide],{duration: $G["anim_speed"]}).start(1,0);
new Fx.Opacity(slides[n],{duration: $G["anim_speed"]}).start(0,1);
this.text_anim(wrap,contents,$G);

switch($G["anim_type"]){
case 0: break;
case 1: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.y,0);break;
case 2: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.x,0);break;
case 3: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.y,0);break;
case 4: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.x,0);break;
}

if(play){
$E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab");
$ES(".gk_ni_6_tab",mainwrap)[n].setProperty("class","gk_ni_6_tab_active");
}

(function(){slides[n].setStyle("z-index",n);}).delay($G["anim_speed"]);
(function(){$G["actual_anim_p"] = false;}).delay($G["anim_speed"]);

var $this = this;

if(!play) this.image_pause($G);
if((play || $G["autoanim"] == 1) && ($G["actual_anim"] == false)){
$G["actual_anim"] = (function(){
n = (n < max) ? n+1 : 0;
$this.image_anim(elID,mainwrap,wrap,slides,n,contents,$G,true);
}).periodical($G["anim_speed"] * 2 + $G["anim_interval"]);
}
}
},
//
image_pause : function($G) { $clear($G["actual_anim"]); $G["actual_anim"] = false; }
});

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

for (n=0;n<images.length;n++)
{
	preload[n]=new Image()
	preload[n].src=images[n]
}

document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=images[curindex]
}

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell

Hey folks..

Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website.

Thanks in advance of any help

Nat


<script language="JavaScript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=10000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="http://www.anywebsite.com/images/splash1.jpg"
randomimages[1]="http://www.anywebsite.com/images/splash2.jpg"
randomimages[2]="http://www.anywebsite.com/images/splash3.jpg"
randomimages[3]="http://www.anywebsite.com/images/splash4.jpg"
randomimages[4]="http://www.anywebsite.com/images/splash5.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes.

What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading).

Could I stop the canvas from reloading the image each time the page is reloaded and if so then how?
Can I make the canvas only load a part of the image, if so then how?

If neither is possible any tips, solutions how to solve the performance issues?

My goal is to replace a 300px x 300px div with a random assortment of pictures, all being 300px x 300px.

I however am not that great at JavaScript (I've taken a bigger bite than I can chew) and would love your guys' help.

So far this is what I have for my JavaScript:
Code:

begin();

function begin()
{
    setTimeout(newimage(),7000);
}

function newimage()
{
    
}

Which brings me to my first question:
What's the best method of pre-loading images?
And also, if the method is not through JavaScript, how would I reference the image from the JavaScript?

My next step would be to transition between images. (Fading specifically.)
I really like the fade transition here and I plan on using that in the site.
How would I incorporate that into my code?
I noticed he made the entire JavaScript code into one line, which is quite annoying.

Thanks guys!

Hi

I have a script which dynamically adds contents to an HTML table using the jQuery's .after();... Now the problem the content is a bit too much and some times IE would crash, so I thought if a loading image would solve this issue?

Any ideas?

Thanks in advance

Hi,

I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file).

I assume this would use the onclick event.

Can anyone help?

I know this was here previously but no solution was found and I wonder if someone could help.

JavaScript loads before even DOM is fully loaded but only in Chrome browser.

I know I could use setTimeout function but it's now ideal in my case.

I am working on a program based on Chromium and have a html page inside it. Page has 4 images that resize (useing javascript) depending on window size

Here is load finction
Code:

window.onload = function(){
			window.document.body.onload = initDocument;
		};
		
		function initDocument()
		{
			stretchFit("divMy", "bg");
			stretchFit("divG", "bgG");
			stretchFit("divTech", "bgTech");
			stretchFit("divKB", "bgKB");
		}

Any ideas how to load function after DOM is loaded?

Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes..

here is the code i use

<?php
$result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error());
$myRaidid = raidid();

if(isset($_GET['gm']))
{
echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
}
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n";
$i++;
}
echo ' <FRAME src="">' . "\n";
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n";
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n";
echo ' </FRAMESET>' . "\n";
echo '</FRAMESET>' . "\n";
}
else
{
echo '<table cellspacing=1 cellpadding=1>' . "\n";
echo '<tr>' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo '</tr>' . "\n";
echo '<tr>' . "\n";
$i = 0;
}
echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n";
$i++;
}
echo '</tr>' . "\n";
echo '<tr>' . "\n";
echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n";
echo '</tr>' . "\n";
echo '</table>' . "\n";
}
?>

Now im told to use the following..
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>

or
var prevent_bust = 0;

// Event handler to catch execution of the busting script.
window.onbeforeunload = function() { prevent_bust++ };

// Continuously monitor whether busting script has fired.
setInterval(function() {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location = 'http://server-which-responds-with-204.com';
}
}, 1);


But the window.top.location i dont know how to incorporate that to work.

Can anyone help?

Hi,
well i searched at google and was not exactly able to find what i was looking for, i am looking for a script the shows by logo while loading the game at back end, shows loading percentage or bar representing how game is loaded and then makes the my logo disappear once the game is loaded e-g like this site has used http://www.gamegape.com/en-2095-elemental-battles.html
if some thing like this is not available can someone atleast tell me how this site has done it, so we could copy it from them ^_^

Hi guys,

I am new here and am looking for a bit of help! I am building a website for a friend and am using Javascript. When I preview the site from my computer in Chrome/Firefox then all the JS elements render correctly.

I am using jCarouselLite by the way and have used HTML Boilerplate too.

However, when I upload the site the Carousel does not work...

Also, I seem to have a lot of scripts kicking around inside the html so I will give you a list of those, but here are my external JS files so my question before posting up all the code are 1.) what is the problem with rendering the JS elements live on t'internet, and 2.) can I reduce the amount of JS files/scripts to help page loading times?
css_browser_select.js modernizr-1.7.min.js jquery-1.6.1.min.js jcarousellite.js functions.js Code:

$(document).ready(function(){
	// Activate the main slider	
	$("#mainSlider").jcarousellite({
		btnNext: "#sliderBtnNext",
		btnPrev: "#sliderBtnPrev",
		visible: 1
	});
});

plugins.js script.js jquery.placeholder.min.js
and this is the code inside my HTML:

Head:

Code:

    <!-- CSS: implied media="all" -->
    <link rel="stylesheet" href="css/style.css" media="screen">
    <link rel="stylesheet" media="handheld" href="css/handheld.css">
    
    <!-- CSS Browser Compatibility --> 
	<script src="js/css_browser_select.js"></script>
    
    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
    <script src="js/libs/modernizr-1.7.min.js"></script>

/Head

and this is at the bottom of the Body:

Code:

    <script src="js/libs/jquery-1.6.1.min.js"></script>
    <script src="js/libs/jcarousellite.js"></script>
    <script src="js/libs/functions.js"></script>

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.1.min.js'>\x3C/script>")</script> 
    
    <!-- scripts concatenated and minified via ant build script--> 
    <script src="js/plugins.js"></script> 
    <script src="js/script.js"></script> 
    
    <!-- THIS MAY NEED TO BE REDONE! Placeholder for Forms --> 
    <script src="js/libs/jquery.placeholder.min.js"></script> 
    <script>
    if (!Modernizr.input.placeholder){
     $('input[placeholder], textarea[placeholder]').placeholder();
    }
    </script> 
    
    <!-- Form Submit --> 
    <script>
    function submitForm()
    {
      document.contactPhone.submit();
    }
    </script> 
    
    <!-- Google Analytics Script - Change UA-XXXXX-X to be your site's ID --> 
    <script>
        var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
        g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
        s.parentNode.insertBefore(g,s)}(document,"script"));
      </script> 
    
    <!-- Bookmark Script --> 
    <script>
    function bookmark_us(url, title){
    
    if (window.sidebar) // firefox
        window.sidebar.addPanel(title, url, "");
    else if(window.opera && window.print){ // opera
        var elem = document.createElement('a');
        elem.setAttribute('href',url);
        elem.setAttribute('title',title);
        elem.setAttribute('rel','sidebar');
        elem.click();
    }
    else if(document.all)// ie
        window.external.AddFavorite(url, title);
    }
    </script>

ok.

so i have all these big images and i need to let the whole page load before the viewer sees it

what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that.

Help!

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html

Where the images on the page fade in as the user scrolls down.
I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html

Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome.

Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!)

Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll.

Any ideas, or if there is better code out there?

Thanks in advance!!

Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop:

http://www.dynamicdrive.com/dynamici...lslideshow.htm

I am open to using other similar slideshows if there is one more suited.

Thanks