Good Day Everyone. I'm using FoundationPress as frontend and Wordpress as backend. I created a very simple plugin to upload image into the homepage. I've no issue with that. I can display them properly in the page I desired. However I wish to use little bit of javascript for the image slideshow.

However I've no clue on where on earth to locate my javascript files. I also noticed that I can't even find a single .js files in Foundationpress header or footer. I did some search but I cant comprehend any. Below are my script. Please somebody help me on this.Thanks a million.

I need to locate this in header:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

This one probably before </body> tag:

<script src="js/jquery.krakatoa.js"></script> <script>
    $(window).on('load',function(){
        $('.krakatoa').krakatoa( { 
            width: '1100px', 
            height: '320', 
            autoplay: true, 
            loop: true, 
            delay: 9000, //Slider on hold for 9 sec
            duration: 800, //Slider Transition Timer
            direction: -1, 
            first: 9});
    });
</script

This is how I display image retrieved from database:

<div class="row"> <div class="large-12 columns"> <div class="krakatoa">//'krakatoa' is the class responsible for slideshow animation


 <?php
 global $wpdb;
 $tablename="tbl_banner";
 $retreive_data=$wpdb->get_results("SELECT * FROM $tablename");
 $upload_dir = wp_upload_dir();
 foreach($retreive_data as $data)
 {

    ?> <img  src="<?php echo $upload_dir['baseurl']."/2014/12/".$data->image_name; ?>"> </div> <?php
 }
 ?> </div> </div>

Recommended Answers

All 3 Replies

Hi,
I gives a look to github and found this in the "Script Folder Structure" section:

  • Script Folder Strucutre

    bower_components/: This is the source folder where all Foundation scripts are located. foundation update will check and update scripts in this folder
    js/custom: This is where you put all your custom scripts. Every .js file you put in this directory will be minified and concatinated to app.js
    js/: jQuery, Modernizr and Foundation scripts are copied from bower_components/ to this directory, where they are minified and concatinated and enqueued in WordPress
    Please note that you must run grunt in your terminal for the scripts to be copied. See Gruntfile.js for details

Hi MasterBlank, Thanks for that..I noticed that too. It's just too preplexing and I dont know how to get this things done. I registered my function then not sure what to do next.

If you look at your first script you mentioned, the source is from an "on line" link, which means you need an Internet connection to make it work properly. The script file is imported and no physical file on your local server.

The second part said that the source is inside the folder "js" in wherever your viewing file location is. You need to look there.

If you have trouble finding the file, you could simply search for it. If you are on Linux/Unix/Mac, you could use command find . -iname *.js to search for the file. If you are on Windows, use dir *.js /b/s command to search for the file inside subfolders of wherever you are.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.