treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Hey there, having a noobie question about installing Movingboxes script

  • hey all,
    after reading the documentation, and trying to understand from viewing source code,
    iam still cant figure how to install, Moving boxes image gallery (http://css-tricks.com/moving-boxes/) on my page.
    i downloaded all the files and place it where it should be. do i have to put any other code on my page? besides this:

    elseif ($str == "work") { echo'

    <!-- Required CSS -->
    <link href="gallery/css/movingboxes.css" media="screen" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <link href="gallery/css/movingboxes-ie.css" rel="stylesheet" media="screen" type="text/css"/>
    <![endif]-->

    <!-- Required script -->
    <script src="gallery/js/jquery.movingboxes.js" type="text/javascript"></script>
    <script>
    $(function(){

    $(\'#slider\').movingBoxes({
    /* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
    width: 500,
    panelWidth: 0.5,
    */
    startPanel : 1, // start with this panel
    wrap : false, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    buildNav : true, // if true, navigation links will be added
    navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
    });

    });
    </script>
    <style>
    div#slider-two { width: 500px; }
    div#slider-two > div { width: 360px; }
    </style>
    <div id="slider-two">
    <div>
    <img src="projects/99zone_fullweb.jpg" alt="picture" width="250" height="250">
    <h2>99Zone<span>Full web tamplet</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p&gt;
    </div></div>';

    note that a PHP page generate this code and it displays by clicking on a link that call ajaxrequest(Thisfile.php).
    thanks all :)
  • Well, from the code you posted it looks like you might have some stuff in the wrong place on your site.

    Everything from <!-- Required CSS --> to </style> needs to be in the <head></head> tags. I can't tell for sure without a link to your site, but it looks like to me that you're trying to put all that in the <body> tag.
  • well, its not the problem, I am aware the syntax and markup for html and i know it should be placed inside the section but although i tried to do so, it doesn't work.
    the code i posted is a part of a php file that should print this content inside a DIV, and it does print it. but from some reason the Movingboxes dosent display at all, like the
    is meaningless and nothing happens.
    i have a feeling that i just miss something.how come this plug-in has no tutorial for "installation"?
  • I don't think we'd be able to help unless you would share a link where we can see that page in action.
  • Sorry, there it is
    http://www.99zone.co.il/forum/amit/webb2.php
    this is the homepage the the gallery should appear in the content box when clicking "My work" in the menu, the relevant code from process.php is what iv'e posted above^, thanks!
    -------- i think i understand the problem, now i need a creative solution--
    since Ajax script output the Movindboxes code into a specific div after everything else loads, so the
    <div id="slider"/"wrapper">
    does not get any effect from the java-scripts and probably the css scripts as well.
    so how can i execute those scripts after ajax output the code?
  • Hi amitd!

    I see two problems here. First, the javascript is written to initialize "#slider" which doesn't exist. It looks like "#slider-two" does.

    Secondly, when I view the source of the site, all of the code that is added using php echo is added to the page head, including the slider html. The browser automatically removes html from the head. So, either move that entire echo block into the page body (not ideal) or separate the echo into two parts. One part for the css and javascript in the head and the second part for the html in the body.