Page 1 of 1 |
Lutzifer
Modzilla
Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
|
Posted: Tue, 3rd Nov 2009 00:01 Post subject: need jQuery help: randomized images and loading script |
|
 |
i m trying to merge two nice scripts together but somehow i m making something wrong =(
This is how i thought it should work:
Code: |
$(function () {
var randomImages = ['./content/pp/img/2511_1_b.jpg','./content/pp/img/5178_1_b.jpg','./content/kameha/img/5744_1_b.jpg'];
var rndNum = Math.ceil(Math.random() * randomImages.length);
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#loader').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', '+ rndNum +' );
});
|
Derived from:
http://jqueryfordesigners.com/image-loading/
and:
http://www.designateonline.com/discussions/comments.php?DiscussionID=4258&page=1
|
|
Back to top |
|
 |
Lutzifer
Modzilla
Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
|
Posted: Tue, 3rd Nov 2009 00:05 Post subject: |
|
 |
it works as it should when i leave out the randomize function. So how do i go about adding the array of random pics in there without fucking it up?
|
|
Back to top |
|
 |
|
Posted: Tue, 3rd Nov 2009 01:46 Post subject: |
|
 |
oh ok
> }).attr('src', '+ rndNum +' ); <
look closely ....
yeah ...
}).attr('src', rndNum );
^^ should do the trick, cause the rest looks ok
I haven't tried it myself. If it doesn't work just post again and I'll take a deeper look 
|
|
Back to top |
|
 |
Lutzifer
Modzilla
Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
|
Posted: Tue, 3rd Nov 2009 20:04 Post subject: |
|
 |
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 12:08 Post subject: Re: need jQuery help: randomized images and loading script |
|
 |
Maybe then it works like this:
}).attr('src', randomImages[rndNum] );
(You know... number isn't exactly the source.)
?
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 12:26 Post subject: |
|
 |
Sorry to hijack the thread, but I have a question. I have regular HTML page with images, but I saw on some tutorial cool java thing where you can make sth like this http://cssglobe.com/lab/tooltip/02/
Can I just implement it in the existing layout?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
garus
VIP Member
Posts: 34200
|
Posted: Wed, 4th Nov 2009 12:37 Post subject: |
|
 |
snip
Last edited by garus on Tue, 27th Aug 2024 21:14; edited 1 time in total
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 12:41 Post subject: |
|
 |
Well thnx for the heads up
So I just find the matching code and put it in my page?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 16:13 Post subject: |
|
 |
Yep, pretty much. Look under main.js in page source.
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 17:02 Post subject: |
|
 |
woohoo!! Thnx!!
EDIT: I have a problem :\
I have done as it said in the tutorial page, but I don't have little images which turn to big, I have Big images when rolled over give the same - big image... Plus I think that their main.js is not liking my style.css Halp!
The jscript code is:
Spoiler: |
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<h1>Easy Image Preview with jQuery</h1>
<h2>Image gallery (without caption)</h2>
<ul>
<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
<h2>Image gallery (with caption)</h2>
<ul>
<li><a href="1.jpg" class="preview" title="Lake and a mountain"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview" title="Fly fishing"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="3.jpg" class="preview" title="Autumn"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="4.jpg" class="preview" title="Skiing on a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>
|
|
And mine is:
Spoiler: |
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="dingo_bastard used template by http://www.studio7designs.com" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="wrapper-menu-top">
<div id="menu-top">
<ul>
<li><a href="fax.html" title="fax"><span>Fax</span></a></li>
<li><a href="razno.html" title="razno"><span>Razno</span></a></li>
<li><a href="korisno.html" title="korisno"><span>Korisno</span></a></li>
<li><a href="index.html" title="index"><span>Početna</span></a></li>
<li><a href="about.html" title="about"><span>About</span></a></li>
<li><a href="contact.html" title="contact"><span>Contact</span></a></li>
</ul>
</div><!--menu-top-->
</div><!--wrapper-menu-top-->
<div id="wrapper-header">
<div id="header">
<div id="wrapper-header2">
<div id="wrapper-header3">
<h1>Title</h1>
</div>
</div>
</div>
</div>
<div id="wrapper-content">
<div id="wrapper-menu-page">
<div id="menu-page">
<h3>Korisni linkovi</h3>
<ul>
<li><a href="http://www.">sth</a> - matična stranica</li>
<li><a href="http://www.google.hr">Google</a> - need I say more...</li>
<li><a href="http://www.sth">Nfohump</a> - sth</li>
<li><a href="http://sth">sth</a> -bla</li>
<li><a href="http://www.urbandictionary.com">Urban dictionary</a> - .</li>
<li><a href="http://www.wikipedia.org">Wikipedia</a> - enciklopedija na netu </li>
<li><a href="http://www.bla">bla</a> bla</li>
<li><a href="http://www.deviantart.com">Deviant art</a> - where ART meets application </li>
<li><a href="http://www.warez-bb.org">Warez-bb</a> - bla</li>
<hr />
<li><strong>Best viewed in</strong> <a href="http://www.mozilla.com/en-US/firefox/">Mozilla Firefox</a></li>
<li>Zadnja promijena: 22.02.2009.</li>
</ul>
<p><img src="images/logo.png" width="165" height="80" alt="" /></p>
</div><!--menu-page-->
</div>
<div id="content">
<ul>
<li><a href="planet2.jpg" class="preview" title="Jedan planet koji sam napravil i stavil na svoj DeviantArt profil"><img src="planet2.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="oldweb.gif" class="preview" title="Zadnja izmjena weba prije sadašnje"><img src="oldweb.gif" alt="gallery thumbnail" /></a></li>
<li><a href="befor.gif" class="preview" title="Ovako je web izgledal prije..."><img src="befor.gif" alt="gallery thumbnail" /></a></li>
<li><a href="Dragon-vectorpreview.png" class="preview" title="Moja škrabarija u illustratoru"><img src="Dragon-vectorpreview.png" alt="gallery thumbnail" /></a></li>
</ul>
</div>
</div>
<div id="wrapper-footer">
<div id="footer">
Design by <a href="http://www.studio7designs.com">studio7designs</a> | copyright 2009 dingo_bastard
</div>
</div>
</body>
</html>
|
|
I have already put the images and jquery.js but it's not working as I would wish...
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
Lutzifer
Modzilla
Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
|
Posted: Wed, 4th Nov 2009 20:56 Post subject: Re: need jQuery help: randomized images and loading script |
|
 |
silent2 wrote: | Maybe then it works like this:
}).attr('src', randomImages[rndNum] );
(You know... number isn't exactly the source.)
? |
yeah, now it works! Had it like that before and it didnt work because i put it in ' '
The only thing odd now is, that it only works for two of the three test-images. I ll have to look into that now =)
thanx for reminding me, would have given up now otherwise 
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 21:15 Post subject: |
|
 |
You should use Math.floor(Math.random() * randomImages.length);
cause random goes from 0 to <1.
|
|
Back to top |
|
 |
Lutzifer
Modzilla
Posts: 12740
Location: ____________________ **** vegan zombie **** GRRAAIIINNSS _______
|
Posted: Wed, 4th Nov 2009 21:20 Post subject: |
|
 |
PumpAction wrote: | You should use Math.floor(Math.random() * randomImages.length);
cause random goes from 0 to <1. |
yeah, came up with that by myself already and everything is working great now. Thanx for helping! <3 <3 <3
|
|
Back to top |
|
 |
|
Posted: Wed, 4th Nov 2009 21:22 Post subject: |
|
 |
no problem 
|
|
Back to top |
|
 |
|
|
Back to top |
|
 |
|
Posted: Thu, 5th Nov 2009 10:54 Post subject: |
|
 |
Oh jea I didn't see that! Thnx 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson chiv wrote: | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
Back to top |
|
 |
|
|
Back to top |
|
 |
Page 1 of 1 |
All times are GMT + 1 Hour |