1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Basic jQuery Help

Discussion in 'jQuery' started by RyanDan, Oct 20, 2012.

0
  1. #1
    Over the last year I have been learning how to build websites mostly by watching youtube videos. To further expand my skills my most recent quest has been about jQuery. I have watched video after video and read one website after another but I just can't seem to wrap my head around this language. I have been trying to add the jQuery Image Cube to a website and it is proving to be a real pain. I know to most others this is just basic java but I need help just adding the basic script to the site. Here is the run down if anyone would be kind enough to guide me-

    I found the plugin at (http://keith-wood.name/imageCube.html)

    I downloaded the files

    I copied the jquery.imagecube.js file into my sites js folder

    I copied the below div from the plugin site and added it into my html file with images of my own

    <div id="defaultCube" style="width: 200px; height: 150px;">
    <img src="uluru.jpg" alt="Uluru" title="Uluru"/>
    <img src="islands.jpg" alt="Islands"title="Islands"/>
    <img src="gorge.jpg" alt="Gorge" title="Gorge"/>
    </div>

    I added the jQuery library to the head of the file like so-

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    I then added the link link to jquery.js file like so-

    <script type="text/javascript" src="js/jquery.imagecube.js"></script>

    But that's as far as I can get. Step 3 of the instructions say "Connect the image cube functionality to your divisions." But where? Is this done in the jquery.imagecube.js file? It also gives a block of code that I believe is where you connect the function to the div but where does it go? Does it go in the head section of the html file or in the jquery.imagecube.js file and if so where? This is that code-

    $('#defaultCube').imagecube();

    $('#stopCube').toggle(function() {
    $(this).text('Start');
    $('#defaultCube').imagecube('stop');
    }, function() {
    $(this).text('Stop');
    $('#defaultCube').imagecube('start');
    }
    );

    $('#removeCube').toggle(function() {
    $(this).text('Re-attach');
    $('#defaultCube').imagecube('destroy');
    },
    function() {
    $(this).text('Remove');
    $('#defaultCube').imagecube();
    }
    );


    Thanks for the help
     
    Solved! View solution.
    RyanDan, Oct 20, 2012 IP
  2. #2
    jQuery plugins (like that imagecube.js file) are not meant to be edited - just referenced. To include your code, wrap it in a $(function(){}) call like so:

    <html>
<head>
<!-- script references etc -->
</head>
<body>

<script type="text/javascript">

$(function(){

$('#defaultCube').imagecube(); 
// the rest of your code

});

</script>

</body>
</html>
    HTML:
    Depending on how your site is built it may be better to place that right before the closing </body> tag.
     
    Wogan, Oct 21, 2012 IP
  3. RyanDan

    RyanDan Peon

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I see. So, you have to reference the .js file and also include a function code in the html itself. Is this the same with all jQuery?

    p.s. I got it to work. I did have to remove the $(function(){ part from the code you provided but still I got there, thanks
     
    Last edited: Oct 21, 2012
    RyanDan, Oct 21, 2012 IP
  4. knewedge

    knewedge Active Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #4
    Yes. Reference jQuery then any plugins and then invoke them with a function.
     
    knewedge, Oct 27, 2012 IP