Rotator - Revision history

Bacchas at 18:26, 24 December 2016

2016-12-24T18:26:59Z

← Older revision		Revision as of 18:26, 24 December 2016
Line 155:		Line 155:
	}		}
	</pre>		</pre>
			==[[#top\|Back To Top]]-[[Main_Page\| Home]] - [[Java Script\|Category]]==

Bacchas at 23:32, 23 December 2016

2016-12-23T23:32:04Z

← Older revision		Revision as of 23:32, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''
	''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/ Cycle Plugin] '''		''' used the Jquery cycle plugin for the rotation [http://jquery.malsup.com/cycle/ Cycle Plugin] '''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:31, 23 December 2016

2016-12-23T23:31:28Z

← Older revision		Revision as of 23:31, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''
	''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/\| Plugin] '''		''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/ Cycle Plugin] '''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:29, 23 December 2016

2016-12-23T23:29:53Z

← Older revision		Revision as of 23:29, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''
	''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/\|~~Cycle~~ Plugin] '''		''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/\| Plugin] '''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:29, 23 December 2016

2016-12-23T23:29:09Z

← Older revision		Revision as of 23:29, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''
	''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/] '''		''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/\|Cycle Plugin] '''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:28, 23 December 2016

2016-12-23T23:28:32Z

← Older revision		Revision as of 23:28, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON Course'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course <br>'''
			''' used the Jquery cycle plugin for the rotation[http://jquery.malsup.com/cycle/] '''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:21, 23 December 2016

2016-12-23T23:21:25Z

← Older revision		Revision as of 23:21, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON Lynda Javascript and JSON ~~Cource~~'''		''' Jquery, Mustache JSON Lynda Javascript and JSON Course'''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas at 23:21, 23 December 2016

2016-12-23T23:21:03Z

← Older revision		Revision as of 23:21, 23 December 2016
Line 1:		Line 1:
	''' Jquery, Mustache JSON '''		''' Jquery, Mustache JSON Lynda Javascript and JSON Cource'''
	=HTML and Javascript=		=HTML and Javascript=
	<pre>		<pre>

Bacchas: Created page with "''' Jquery, Mustache JSON ''' =HTML and Javascript=

              JSON Carousel     
2016-12-23T23:19:40Z
Created page with "''' Jquery, Mustache JSON '''  =HTML and Javascript= <pre> <!DOCTYPE html> <html lang="en">  <head>     <meta charset="utf-8" />     <title>JSON Carousel</title>     <link hre..."
New page
''' Jquery, Mustache JSON ''' 

=HTML and Javascript=

<pre>

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="utf-8" />

    <title>JSON Carousel</title>

    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Wendy+One" rel="stylesheet">

    <link rel="stylesheet" href="style.css">

</head>



<body>



    <div id="speakerbox">

        <a href="#" id="prev_btn">Prev&laquo;</a>

        <a href="#" id="next_btn">Next&raquo;</a>

        <div id="carousel"></div>

    </div>



    <script id="speakerstpl" type="text/template">

        {{#speakers}}

        <div class="speaker">

            <img src="../../../images/{{shortname}}.jpg" alt="{{name}}">

            <h3>{{name}}</h3>

            <h4>{{reknown}}</h4>

            <p>{{bio}}</p>

        </div>



        {{/speakers}}

    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" type="text/javascript"></script>

    <script>

        $(function() {

            $.getJSON('../../../data.json', function(data) {

                var template = $('#speakerstpl').html();

                var html = Mustache.to_html(template, data);

                $('#carousel').html(html);



                $('#carousel').cycle({

                    fx: 'fade',

                    pause: 1,

                    next: '#next_btn',

                    prev: '#prev_btn',

                    speed: 1000,

                    timeout: 1000

                }); // cycle

            }); // get json file

        });

    </script>

</body>



</html>

</pre>



=CSS==

<pre>

body {

    background: #eee7d5;

    font-family: 'Libre Baskerville';

}



#speakerbox {

    width: 400px;

    margin: 0 auto;

    background: #93a1a1;

    padding: 1px 20px;

    border-radius: 10px;

    overflow: hidden;

}



#speakerbox h3,

#speakerbox h4 {

    font-weight: normal;

    margin: 0;

    padding: 0;

}



#speakerbox h3 {

    font-size: 2em;

    line-height: .9em;

    font-family: 'Wendy One';

    color: #115f79;

}



#speakerbox h4 {

    color: #973c26;

    font-weight: bold;

    margin-bottom: 5px;

    line-height: 1.2em;

}



#speakerbox img {

    float: right;

    margin-left: 10px;

    border-radius: 10px;

    width: 350px;

}



#speakerbox p {

    color: #1e3a40;

    font-size: .9em;

}



#speakerbox #next_btn,

#speakerbox #prev_btn {

    background: #f5f5f5;

    padding: 5px 10px;

    border-radius: 10px;

    margin: 10px 0;

    display: inline-block;

}



#speakerbox a#next_btn,

#speakerbox a#prev_btn {

    text-decoration: none;

    background: #d33682;

    color: #fff;

}

</pre>



=JSON=



<pre>

{

    "speakers": [{

            "name": "Hotel Plant",

            "shortname": "01",

            "reknown": "Potted Hotel Plant",

            "bio": "Grows by the Hotel Window"

        },

        {

            "name": "Robert Bacchas",

            "shortname": "02",

            "reknown": "Computer specialist",

            "bio": "persuing Science Degree"

        },

        {

            "name": "Howler Monkey",

            "shortname": "03",

            "reknown": "Jumping in trees",

            "bio": "persuing Science Degree"

        },

        {

            "name": "Palm Trees",

            "shortname": "04",

            "reknown": "Produce Coconuts",

            "bio": "Many palm trees at sunset, swaying in the breeze at Manuel Antonio, Costa Rica"

        }

    ]

}

</pre>