|
JavaScript - 3d Cube Of Images
hi all,
i wanna make a 3d cube made of images (like this one: http://www.petitpub.com/labs/media/flash/3dcube/). it should rotate by itself randomly in various directions and stop on demand. does anyone know where to find a prototype or tutorial for that? thanx, Similar TutorialsHello everyone I have this grand idea of creating a website and on it would be a large cube that, when one clicks and drags a corner, the cube would rotate in correspondence to the direction one drags his/her mouse and displays the other sides of the cube. I'm a total beginner in Javascript so I don't know where to start out! Should I first make the cube in a 3-D model rendering program such as Blender? Or Photoshop? Etc. All help is appreciated. I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal? Thanks for any help! Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. 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>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
Good afternoon I am trying to make a form and keep getting stuck on one thing, don't know if JavaScript is the way to go so any advise would be helpful. basicly i have a form giftcert.html -that has text input boxes the user fills in and a link to the next page for the user to pick a gift card giftcards.asp -the user picks a gift card by radio buttons (over 100)grouped by name and then pushes a button to take them to the next page passing the value of the radio and image (here is the issue) giftcert.asp -this page displays the text boxes from the first page with the value already present (used asp to achieve) and the value of the radio button (a stock number - used asp to achieve) and i want a sample of the image attached to the stock number. how do i pass the image attached to the radio button from giftcards.asp to giftcert.asp i don't know where i am going wrong a) how do i attach the image to the button do i use an onclick="pass src" and how b) how do i get the image to show up in giftcert.asp if the elements have name attributes with the same value, according to legacy DOM, it will return an array of those elements if you access the name property of 'document'. However, this doesn't apply to img elements. If the HTML code is as follows: Code: <img src="img/a.jpg" name="pic" /><img src="img/b.jpg" name="pic" /> <form name="pic">a</form> <form name="pic">b</form> then document.forms["pic"] (return an array) <-- as expected document["pic"] or document.pic (return an array) <-- as expected document.images["pic"] : in IE -- it returns the last image in FF -- it returns the first image ~~OMG~~ any idea? thx in advance. Hi, I have buttons like these: PHP Code: <button type="button" onclick="izdas()">Iždas</button> <button type="button" onclick="miestas()">Miestas</button> <button type="button" onclick="map()">Žemėlapis</button> <button type="button" onclick="infantry()">Kariuomenė</button> <button type="button" onclick="biuld()">Statiniai</button> How I can add images on them?? Size would be 100x20px. Also, I would e thankful if someone would help me position them in one vertical line. Thanks in advance... Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? Hi, I'm trying to put a script in my code which when an image is clicked in the webpage, i'd like it to go through the array from index 0,1,2,3, displaying the images as the current picture is clicked. Once at the end of the array, i'd like it to return to the first index (0) and do the same again. In effect, i'm trying to create a gallery of images for users to click through. I have this code, now it loads up fine, the first image loads, when I click the image, the image in index[1] loads, but when clicked again, it returns to index[0] then the same happens over and over. My code: Code: <script type="text/javascript">
var myImages = new Array()
myImages[0] = 'images/homePic.png';
myImages[1] = 'images/pinkWall.png';
myImages[2] = 'images/wendy.png';
myImages[3] = 'images/horizon.png';
function imgChange(that)
{
var index = 0;
while (that.src.indexOf(myImages[index]) != -1)
{
myImages[index] = myImages[index++];
}
that.src = myImages[index];
return false;
}
</script>
HTML: Code: <img src="images/homePic.png" id="pic" alt="homePic" name="bGarden" height="344px" width="490px" onclick="return imgChange(this)" /> Any advice will be greatly appreciated, thank you. Hi i have created a scrolling gallery using javascript but i am having trouble aligning my images. right now they are in the center of the page but at the bottom, but i want them on top of the page. here is my code. <html> <head> <title>Gallery</title> <link href="website.css" rel="stylesheet" type="text/css"> <left> <table border="0" width="50" height="200"> <tr><td><a href="unique sports.html"><img width="400" height="230" align="center" src="unique sports logo.gif" border="0"></td></tr> <tr><td><a href="unique sports.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/home button.gif" border="0"><a/></td></tr> <tr><td><a href="about us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/about us.gif" border="0"></a> </td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/reviews.gif" border="0"></a> </td></tr> <tr><td><a href="Contact us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/contact us button.gif" border="0"></a></td></tr> </td></tr> <tr><td><a href="shop section.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/shop section .gif" border="0"></td></tr> <tr><td><a/><a href="http://google.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/latest news .gif" border="0"></a></td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/photo gallery .gif" border="0"></a></td></tr> </table> <center> <table> <td> <script language="JavaScript1.2"> var scrollerwidth='500px' var scrollerheight='500px' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<img src="72757631_9c35b8eff2_o.jpg">' slideimages[1]='<img src="363507907_FEDxk-L.jpg">' slideimages[2]='<img src="2542265127_6108971aa4.jpg">' slideimages[3]='<img src="2795508357_66b1cea812.jpg">' var ie=document.all var dom=document.getElementById if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=parseInt(scrollerheight) tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=parseInt(scrollerheight) tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=parseInt(scrollerheight)+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script> </td> </tr> </table> </head> <body> </body> </html> Thank you 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! I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
Folks I'm so in the dark about this that I couldn't even think of a sensible title for the thread! One of my colleagues reckons that some years ago she worked on a website that contained images that were set to be visible to users only between certain dates (different dates for different images, so an image representing January would be visible only during January, and so on). Does this sound like something familiar? If so, would it be done using Javascript? Thanks Remster Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz
Hi! I've seen several sites that use what looks like the alert function (I know it isn't), where the site gets darkened and a popup box (similar to that of the alert one) comes up and displays an image (and only an image) ... how is this done? Regards Matthew Hi all, I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there. I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this? Thanks! Q Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
|
|||||||