Last active
August 29, 2015 14:24
-
-
Save mona87/df93d75ad4464f0c9f55 to your computer and use it in GitHub Desktop.
jQuery Photo Album
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <section class="side-nav " > | |
| <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="pandas">Pandas</button> | |
| </div> | |
| <!-- <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="ducks">Ducks</button> | |
| </div> --> | |
| <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="rabbits">Rabbits</button> | |
| </div> | |
| <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="penguins">Penguins</button> | |
| </div> | |
| <!-- <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="dogs">Dogs</button> | |
| </div> --> | |
| <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="cats">Cats</button> | |
| </div> | |
| </section> | |
| <div id="page-content-wrapper"> | |
| <main class="container-fluid"> | |
| <div class="row"> | |
| <div class="nav"> | |
| Animal Photo Album | |
| <div class="toggles"> Menu | |
| </div> | |
| </div> | |
| <section class="side-nav2" > | |
| <div class="menu-holder"> | |
| <button class="album btn " id="pandas">Pandas</button> | |
| <!-- <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="ducks">Ducks</button> | |
| </div> --> | |
| <button class="album btn " id="rabbits">Rabbits</button> | |
| <button class="album btn " id="penguins">Penguins</button> | |
| <!-- <div class=""> | |
| <button class="album btn btn-primary btn-lg" id="dogs">Dogs</button> | |
| </div> --> | |
| <button class="album btn " id="cats">Cats</button> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="row main-view"> | |
| <section class ='col-sm-12 sect'> | |
| <div class="menu"> | |
| </div> | |
| <section class="row"> | |
| <div class="col-sm-6"> | |
| <div class="photo pandas" id="1"> | |
| </div> | |
| <div class="title">Pandas</div> | |
| </div> | |
| <!-- <div class="col-sm-4"> | |
| <div class="photo ducks" id="2"></div> | |
| <div class="title">Ducks</div> | |
| </div> --> | |
| <div class="col-sm-6"> | |
| <div class="photo rabbits" id="3"></div> | |
| <div class="title">Rabbits</div> | |
| </div> | |
| </section> | |
| <section class="row"> | |
| <div class="col-sm-6"> | |
| <div class="photo penguins" id="4"></div> | |
| <div class="title">Penguins</div> | |
| </div> | |
| <!-- <div class="col-sm-4"> | |
| <div class="photo dogs" id="5"></div> | |
| <div class="title">Dogs</div> | |
| </div> --> | |
| <div class="col-sm-6"> | |
| <div class="photo cats" id="6"></div> | |
| <div class="title">Cats</div> | |
| </div> | |
| </section> | |
| </section> | |
| </div> | |
| <section class="row"> | |
| <div class="col-sm-12"> | |
| <div class="row"> | |
| <div class="full-title"></div> | |
| </div> | |
| <div class="full-img-holder"> | |
| <div class="row" > | |
| <div class="full-img "></div> | |
| <div class="col-sm-12"><button class="btn btn-primary btn-lg" id ="back-btn">Back to album</button></div></div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="row"> | |
| <footer></footer> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> | |
| <script type="text/javascript" src="main.js" ></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var $album1 = $('#1'); | |
| var $album2 = $('#2'); | |
| var $album3 = $('#3'); | |
| var $album4 = $('#4'); | |
| var $album5 = $('#5'); | |
| var $album6 = $('#6'); | |
| var $photo = $('.photo'); | |
| var $backBtn = $('#back-btn'); | |
| var $albumBtn = $('.album') | |
| var $toggle = $('.toggles'); | |
| var bool = true; | |
| var self = this; | |
| var albumArray = [$album1, $album2, $album3, $album4, $album5, $album6]; | |
| //show home page images | |
| getImg('main'); | |
| //loads album | |
| $albumBtn.on('click', function(e) { | |
| getImg($(this).attr('id')); | |
| if ($(window).width() < 767){ | |
| $('.side-nav2').slideToggle('slow'); | |
| } | |
| }); | |
| //gets the images from the server | |
| function getImg(category) { | |
| $.get('http://tiny-pizza-server.herokuapp.com/collections/mona', function(info) { | |
| var array = [] | |
| for (var i = 0; i < info.length; i++) { | |
| if (info[i].album === category) { | |
| // console.log(info[i].album ); | |
| array.push(info[i]); | |
| } | |
| } | |
| // console.log('array ' + array); | |
| for (var i = 0; i < array.length; i++) { | |
| $(albumArray[i]).css('background-image', 'url(' + array[i].url + ')'); | |
| $(albumArray[i]).css('background-size', 'cover'); | |
| } | |
| }, 'json'); | |
| } | |
| //changes the layout to show side-nav | |
| $photo.on('click', function(e) { | |
| if (bool) { | |
| $('.title').hide(); | |
| // $('#wrapper').css('padding-left', '150px'); | |
| // $('#wrapper').css('margin-right' ); | |
| var category = $(this).attr('class').split(' ')[1]; | |
| getImg(category); | |
| bool = false; | |
| } else { | |
| //shows full image | |
| // $('.side-nav').hide(); | |
| $('#wrapper').css('padding-left', '0'); | |
| // console.log('true'); | |
| $target = $(e.target); | |
| var url = $target.css('background-image'); | |
| // console.log($target.css('background-image')); | |
| $('.side-nav2').slideUp('slow'); | |
| $('.toggles').hide(); | |
| $('.full-img').css('background-image', url); | |
| $('.full-img').css('background-size', 'cover'); | |
| $('.full-img').css('background-repeat', 'no-repeat'); | |
| $('.full-img').css('width', '80%'); | |
| $('.full-img').css('height', '0'); | |
| $('.full-img').css('padding-bottom', '50%'); | |
| $('.full-img').css('margin', '0 auto'); | |
| $('.full-img').css('border', '1px solid black'); | |
| $('.full-img').css('box-shadow', '0 0 5px black'); | |
| $('.full-title').html('Photo ' + $target.attr('id')); | |
| //hide and show | |
| $('.main-view').hide(); | |
| // $('.full-title').show(); | |
| $('.full-img-holder').fadeIn('fast'); | |
| $('.full-img').fadeIn('fast'); | |
| } | |
| }) | |
| $toggle.on('click', function(e){ | |
| // e.preventDefault(); | |
| $('.side-nav2').slideToggle('slow'); | |
| }) | |
| $backBtn.on('click', function(e) { | |
| // $('#wrapper').css('padding-left', '150px'); | |
| $('.main-view').show(); | |
| $('.toggles').show(); | |
| $('.full-title').hide(); | |
| $('.full-img-holder').hide(); | |
| }) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login-top.png') repeat; | |
| font-family: 'Cantarell', sans-serif; | |
| } | |
| .nav{ | |
| display: block; | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login.png') repeat; | |
| text-align: left; | |
| font-size: 30px; | |
| padding: 20px 10px 20px 20px; | |
| color:white; | |
| box-sizing: border-box; | |
| } | |
| .side-nav{ | |
| /*display:none;*/ | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login.png') repeat; | |
| position: fixed; | |
| height: 100%; | |
| width: 250px; | |
| padding-top: 100px; | |
| padding-left: 20px; | |
| overflow-y: auto; | |
| z-index: 1; | |
| margin-left: -250px; | |
| transition: all 0.4s ease 0s; | |
| opacity: .8; | |
| display: none; | |
| /*background-color: black;*/ | |
| } | |
| #wrapper { | |
| /*padding-left: 150px;*/ | |
| /*padding-left: 20px;*/ | |
| transition: all 0.4s ease 0s; | |
| } | |
| #page-content-wrapper { | |
| width: 100%; | |
| } | |
| button{ | |
| display: block; | |
| margin-bottom: 10px; | |
| width: 200px; | |
| display: none; | |
| margin-top: 30px; | |
| } | |
| .btn-primary{ | |
| background-color: white; | |
| color: black; | |
| border-radius: 5px; | |
| box-shadow: 0 0 3px black; | |
| border: none; | |
| width: 100px; | |
| /*margin-left: 100px;*/ | |
| transition: .2s; | |
| outline: none; !important; | |
| } | |
| .btn-primary:hover, .btn-primary:active, .btn-primary:focus{ | |
| background-color: grey; | |
| outline: none; !important; | |
| } | |
| .main-view{ | |
| padding-bottom: 50px; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .col-sm-4{ | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| } | |
| .title{ | |
| /*display: none;*/ | |
| text-align: center; | |
| font-size: 20px; | |
| margin-top: 10px; | |
| } | |
| #back-btn{ | |
| width: 100%; | |
| } | |
| .photo{ | |
| height: 200px; | |
| background-color: #eee; | |
| /*border: 1px solid black;*/ | |
| background-size: cover; | |
| box-shadow: 0 0 3px black; | |
| margin-top: 50px; | |
| border-radius: 0px; | |
| } | |
| .full-img{ | |
| display: none; | |
| /*max-width: 50%;*/ | |
| } | |
| .full-img-holder{ | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login-top.png') repeat; | |
| width: 100%; | |
| min-height: 400px; | |
| padding: 10px 20px 50px 20px; | |
| box-sizing: border-box; | |
| display: none; | |
| margin-top: 20px; | |
| } | |
| .full-title{ | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login.png') repeat; | |
| text-align: center; | |
| font-size: 30px; | |
| background-color: rgba(0,0,0,.8); | |
| color: white; | |
| height: 100px; | |
| padding-top: 25px; | |
| display: none; | |
| } | |
| #back-btn{ | |
| margin-bottom: 20px ; | |
| width: 100%; | |
| /*margin-left: 50px;*/ | |
| } | |
| .menu-holder > button{ | |
| float: left; | |
| /*margin-right:10px; | |
| margin-left:10px;*/ | |
| outline: none; | |
| display: block; | |
| width: 100%; | |
| background-color: white; | |
| } | |
| #pandas{ | |
| } | |
| #penguins{ | |
| } | |
| .menu-holder{ | |
| overflow: hidden; | |
| width: 100%; | |
| padding: 0 20px 30px 20px; | |
| box-sizing: border-box; | |
| } | |
| .side-nav2{ | |
| background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login.png') repeat; | |
| /*border: 1px solid red;*/ | |
| overflow: hidden; | |
| opacity: .8; | |
| margin: 0 auto; | |
| display: none; | |
| } | |
| .menu-holder{ | |
| margin: 0 auto; | |
| } | |
| .toggles{ | |
| /*background-color: white;*/ | |
| color: black; | |
| font-size: 20px; | |
| color: white; | |
| text-align: left; | |
| border-radius: 5px; | |
| /*box-shadow: 0 0 3px black;*/ | |
| border: none; | |
| width: 100px; | |
| /*margin-left: 10px;*/ | |
| float: left; | |
| transition: .2s; | |
| outline: none; !important; | |
| } | |
| .btn{ | |
| width: 100px; | |
| } | |
| footer{ | |
| /* background: url('https://raw.githubusercontent.com/TIY-Austin-Front-End-Engineering/jquery-login/master/bg-login.png') repeat; | |
| height: 50px;*/ | |
| } | |
| @media (min-width:767px) { | |
| #wrapper { | |
| /*padding-left: 20px;*/ | |
| } | |
| #back-btn{ | |
| margin-left: 0; | |
| width: 200px; | |
| } | |
| #toggles{ | |
| float: none; | |
| margin-left: 100px; | |
| } | |
| .nav{ | |
| font-size: 40px; | |
| min-height: 100px; | |
| text-align: center; | |
| } | |
| #pandas{ | |
| margin-left: 100px; | |
| } | |
| #penguins{ | |
| margin-right: 10px; | |
| } | |
| .menu-holder{ | |
| margin: 0 auto; | |
| max-width: 620px; | |
| } | |
| .menu-holder > button{ | |
| width:100px; | |
| margin-right:10px; | |
| margin-left:10px; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment