...

View Full Version : Help please, I could give you money through PayPal



travisfromlargo
12-10-2009, 05:16 AM
Go to usps.com to see an example of what I'm trying to do.

Heres a picture circling what I'm talking about.
http://i48.tinypic.com/21l4oy9.jpg

Many have sites have similar things using flash. http://www.livingcontemporary.com/

But I like how your not required to have flash to see the post offices.

I'd like someone to make the code for me and explain how to edit it. I know this is my first post, and I don't want to seem like a leech. Thats why i'm offering money. I can pay you through PayPal when your finished.

JavaScriptGuy
12-10-2009, 06:35 AM
Although I'm much more comfortable doing things in Flash, another option for doing this is JavaScript. Here's one way that you can achieve a slideshow like this.
<html>

<head>

<script language="JavaScript">

var timer = 0;
//Time in milliseconds for each slide to stay on-screen
var timeout = 3000;

//Array holding URLs of images we want
var imageArray = new Array(
"http://hof.povray.org/images/bigthumb/office-13.jpg",
"http://radsite.lbl.gov/mgf/gif/office.gif",
"http://www.maispace.com/ac/images/office-furniture-01.jpg",
"http://www.joelonsoftware.com/items/2008/12/29-office.jpg");

function slideShow(myIndex){
//Another name for myIndex
currentSlide = myIndex;

//Clear timer to start over
window.clearTimeout(timer);
timer = null;

//If current slide is at the end of the array, start back at beginning
if (currentSlide == imageArray.length){
currentSlide = 0;
}

//Reach into our image and re-assign its src to a URL in the array
document.images.slider.src = imageArray[currentSlide];

//Wait a certain period of time before re-calling this same function
//We send the current slide + 1 as a parameter.
timer = setTimeout('slideShow(++currentSlide)',timeout);
}


</script>

</head>

<body onLoad="slideShow(0)">
<!-- THIS IS THE IMAGE THAT WILL BE MANIPULATED -->
<img name="slider" src="" />
</body>

</html>

I didn't bother to make sure the images were the same size. I just grabbed the first few image URLs off Google I could. Save this file as "slideShow.html" and open it up in a browser.

Basically, after the page loads, it calls a slide show function. All that function really does is change the "src" attribute of that one image we have in the body of our page. It changes the src to different URLs, which is just an array of strings. Then we just re-iterate the same function we're already in with the index being 1 higher. There's also a check in there to start over if we've reached the end of the array.

This is a pretty simple and easy-to-apply method, and you can add as many image URLs as you want and change the timeout to your liking.

travisfromlargo
12-10-2009, 06:42 AM
What about the fade effect?

JavaScriptGuy
12-10-2009, 06:56 AM
What about the fade effect?

I'll see if I can think of a way to do it, but my JavaScript is pretty n00b-ish, which is ironic considering the username I chose. The only reason I can do JavaScript is because I've been doing ActionScript for years and know C++ and PHP pretty well.

I could gladly get it done in Flash in the blink of an eye, but someone else will have to point you in the right direction for the JavaScript fade effect.

travisfromlargo
12-10-2009, 08:15 AM
Well could you make me one in flash like the one on livingcontempoary.com . Pm me about details.

seco
12-10-2009, 09:10 AM
jquery photo cycle

nitishkunal
12-10-2009, 01:00 PM
Hi, you can hire us for all your web designing and media development services. Experienced professionals creating what is needed. You can add me here for direct contact and support. add kunalf397@gmail.com




Go to usps.com to see an example of what I'm trying to do.

Heres a picture circling what I'm talking about.
http://i48.tinypic.com/21l4oy9.jpg

Many have sites have similar things using flash. http://www.livingcontemporary.com/

But I like how your not required to have flash to see the post offices.

I'd like someone to make the code for me and explain how to edit it. I know this is my first post, and I don't want to seem like a leech. Thats why i'm offering money. I can pay you through PayPal when your finished.

hdewantara
12-14-2009, 09:39 AM
Flash is probably the best, and jQuery/ Mootools are good tools for quick implementation of your fadding, rollover FX, etc.

I usually find pure javascript has much fun to use :D and below is one rough example from my previous work.

In the example, images are 200 wide and 100 high. All are indexed, i.e: image1.jpg, image2.jpg, ...

Fell free to edit and use.


<!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" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>image cycler demo</title>

<style type="text/css">
body{ padding: 1em;}

img{ border:0px #c0c0c0 solid;}

div{ /* MUST MATCH TO IMAGE DIMENSION.*/
width:200px;
height:100px;
}

#div_wrapper{
float: left;
border: 1px black dashed;
margin-right: 1em;
}

#div_back{
background: url(image2.jpg) no-repeat;
}

#div_middle{
position: relative;
top:-100px;
background: url(image1.jpg) no-repeat;
}

#div_front{
position: relative;
top:-200px;
padding: 1em;
color: yellow;
}
</style>

<script type="text/javascript">
// MY JAVASCRIPT IMAGE CYCLING. FEEL FREE TO USE, EDIT, ETC.

var // THIS SHOULD BE CONSTANTS, SADLY IE CAN'T SEE
msec_still=3000; // STILL IMAGE'S MSEC TO LIVE.
msec_anim=33; // ONE ANIM IMAGE MSEC TO LIVE, IDEALLY <= 1000/30 MSEC.
steps=10; // NUM OF ANIMATION STEPS.
n=3; // NUM OF IMAGE FILES.

ID_still=null; // STILL TIMER ID
ID_anim=null; // ANIMATION TIMER ID
transp=steps; // CURRENT TRANSPARENCY OF DIV_MIDDLE, INITIALLY VISIBLE, 0<TRANSP<STEPS.
ox=1; // CURRENT IMAGE FILE INDEX LOADED INTO DIV_MIDDLE.
x=2; // CURRENT IMAGE FILE INDEX LOADED TO DIV_BACK.

function settranspf(obj){
with (obj.style){
opacity = transp/steps; // 0<MOZILLA OPACITY<1
filter = "alpha(opacity=" + 100*transp/steps +")"; // 0<IE OPACITY<100
}
}

function stillf(){
ID_still=null; //ALWAYS
ID_anim=setInterval("animf()",msec_anim);
}

function animf(){
var
middle=document.getElementById("div_middle");

if (transp==0){ //ANIMATION FINISHES
clearInterval(ID_anim); //STOP ANIMATION
ID_anim=null;

ox=x;
if (x==n) x=1; //UPDATE NEXT FILE TO BE LOADED
else x++;

middle.style.backgroundImage=
"url(image"+ox+".jpg)"; //COPY BACK IMAGE TO MIDDLE
transp=steps; //RESTART ANIMATION
settranspf(middle);
document.getElementById("div_back").style.backgroundImage=
"url(image"+x+".jpg)"; //CHANGE BACK'S IMAGE

ID_still=setTimeout("stillf()",msec_still); // LET STILL IMAGE LIVES.
}
else{
transp--;
settranspf(middle); //ANIMATING...
}
}

</script>
</head>

<body onload="ID_still=setTimeout('stillf()',msec_still);">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer risus velit, facilisis eget, viverra et, venenatis id, leo. </p>

<!-- PICTURE HOLDER -->
<div id="div_wrapper">
<div id="div_back"></div>
<div id="div_middle"></div>
<div id="div_front"><em>SOME TEXT HERE</em></div>
</div>

<p>Mauris et dolor. In hac habitasse platea dictumst. Cras gravida. Aenean justo ipsum, luctus ut, volutpat laoreet, vehicula in, libero. Nam id neque. Proin lectus orci, venenatis pharetra, egestas id, tincidunt vel, eros. Suspendisse viverra placerat tortor. Nunc in turpis ac lacus eleifend sagittis. Pellentesque convallis dolor vel libero. Nullam libero nunc, tristique eget, laoreet eu, sagittis id, ante. Phasellus lacinia iaculis mi. Etiam pede nunc, vestibulum vel, rutrum et, tincidunt eu, enim. Nam consectetuer mollis dolor. Suspendisse potenti. Pellentesque convallis dolor vel libero. </p>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum