Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help please, I could give you money through PayPal

    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.
    Last edited by travisfromlargo; 12-10-2009 at 05:29 AM.

  • #2
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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.
    Last edited by JavaScriptGuy; 12-10-2009 at 06:49 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What about the fade effect?

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by travisfromlargo View Post
    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.

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well could you make me one in flash like the one on livingcontempoary.com . Pm me about details.

  • #6
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    jquery photo cycle

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Location
    India
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hi.....

    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



    Quote Originally Posted by travisfromlargo View Post
    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.

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    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 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.

    PHP 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" 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{  padding1em;}

    img{  border:0px #c0c0c0 solid;}

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

    #div_wrapper{
      
    floatleft;
      
    border1px black dashed;
      
    margin-right1em;
    }

    #div_back{
      
    backgroundurl(image2.jpgno-repeat;
    }

    #div_middle{  
      
    positionrelative;
      
    top:-100px;
      
    backgroundurl(image1.jpgno-repeat;
    }

    #div_front{  
      
    positionrelative;
      
    top:-200px;
      
    padding1em;
      
    coloryellow;
    }
    </
    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==nx=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> 
    Last edited by hdewantara; 05-29-2013 at 08:36 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •