Skip navigation
DKphotos112
Currently Being Moderated

How to use "The Wall"

Jun 27, 2013 6:09 PM

Tags: #problem #help #error #adobe #mac #html #dreamweaver #javascript #css #code #layout #html5 #cs6 #the #wall #dw #mootools #moo

Hi Im trying to create a new home page slideshow and I would like to use The wall which is a javascript plugin for mootools, the problem is I cant seem to figure out how to get it to work nor find a tutorial.

 

http://wall.plasm.it

http://mootools.net

 

For now i just want to create a simple fading automatic slideshow

http://wall.plasm.it/examples/example-automatic-slideshow/

CONFIGURATION FOR SLIDESHOW CODA 2

 

Thank you in advance.

 
Replies
  • Currently Being Moderated
    Jun 27, 2013 6:46 PM   in reply to DKphotos112

    View the source code of the example. What have you done so far?

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2013 7:16 PM   in reply to DKphotos112

    Welp, besides saying look at the source code and/or seeing what you've done (and perhaps done wrong) no one can really help.

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2013 12:11 AM   in reply to DKphotos112

    You'll most likely need to include mootools script for funtionality as well, but, as mentioned earlier, it would help to show what you've done so far. That will help others guide you through what you might be doing wrong.

     

    best,

    Shocker

     
    |
    Mark as:
  • max_zgz
    1 posts
    Aug 13, 2013
    Currently Being Moderated
    Aug 13, 2013 3:35 AM   in reply to DKphotos112

    It wasn't work for me. there is another way to do the wall?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 9:05 AM   in reply to max_zgz

    Copy & paste this code into a new, blank document.  Replace images with your own.  Save as test.html and preview in browsers.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Cycle2</title>
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--Cycle2 Plugin Script-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js">
    </script>
    
     <style>
    .cycle-slideshow {margin:0 auto; width:50%;}
    .cycle-slideshow img {max-width:100%}
    </style>
    
    </head>
    <body>
    <h1>jQuery Cycle 2 Responsive Slideshow</h1>
    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-pause-on-hover='true',
        data-cycle-speed='1000'
    >
    <!--your images go here-->
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
    <img src="http://malsup.github.com/images/beach4.jpg">
    <img src="http://malsup.github.com/images/beach9.jpg">
    <!--end slideshow-->
    </div>
    
    </body>
    </html>

     

    It really is that easy.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 11:58 AM   in reply to DKphotos112

    Please post a link to YOUR page.  You're probably not using the right doc type or your paths to scripts and CSS files are not right.  The only way to check your work is if you post a link to it.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 12:51 PM   in reply to DKphotos112

    Upload your test page and supporting files to your web server.   That's the very best way for us to help you. 

     

    If you don't have web hosting yet (and you should), there are some free web sites you can use for testing and debugging purposes.

    http://www.000webhost.com/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 1:41 PM   in reply to DKphotos112

    Where is your images folder?  I don't see any.

     

    404 not found:

    http://dkphotos.net/Wall%20Test/logo.png

     

    Shouldn't this code be inside your HTML page rather than your CSS file?

     

    <script>

    // Define The Wall

    var maxLength    = 100; // Max Number images

    var counterFluid = 1;

    var wallFluid = new Wall("wall", {

                    "draggable":true,

                    "inertia":true,

                    "width":200,

                    "height":200,

                    "rangex":[-100,100],

                    "rangey":[-100,100],

                    callOnUpdate: function(items){

                        items.each(function(e, i){

                            var a = new Element("img[src=/images/"+counterFluid+".jpg]");

                                a.inject(e.node).fade("hide").fade("in");

                            counterFluid++;

                            // Reset counter

                            if( counterFluid > maxLength ) counterFluid = 1;

                        })

                    }

                });

    // Init Fluid Wall

    wallFluid.initWall();

     

    <script>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 2:25 PM   in reply to DKphotos112

    Please make those corrections to your CSS and HTML page and upload it to your server.

     

    If the images folder is in the same folder as your HTML page, the in your script should probably be this without the slash:

      var a = new Element("img[src=images

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 2:44 PM   in reply to DKphotos112

    Maybe it has to do with folder permissions on your server. Sorry.  I don't know what more to tell you.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2013 5:19 PM   in reply to DKphotos112

    Honestly, I've only ever used Mootools once and that was a while back.  I much prefer jQuery. 

     

    If you do a Google search for jQuery Wall, you'll find others like this one:

    http://codecanyon.net/item/the-wall-media-gallery-jquery-powered/22391 5?ref=simonmcm

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points