Thursday, January 22, 2015

Lab 18 Reflection Blog

In this lab, lab 18, I was tasked with taking 4 images and make it so when I start off with one image and press previous or next, it slides to a image one by one. This was called the obligatory slider. Before I continue, though I understood the objective of the assignment I don't feel that I have my best work shown in this lab. To be more precise I was not able to repair the lab due to the fact that when check what was wrong with my java script and CSS, I could not find any problems whatsoever, therefore troubleshooting was not in favor throughout the process of this lab. With that being said, I feel that what can be accomplish with the contents of the code of this lab is very important. I have seen sliders like these on pages such as amazon and eBay and etc, so to be able to incorporate such an element into a website is something I feel is a very powerful tool. So with this lab the plan was to have it so each set would move in a set direction. These directions were: left to right, right to left, up to down and down to up. Though it was not successful I do think however my code was along right lines.

This is the code I used for this lab:

<title>The Obligatory Slider</title>

<style>
body{
width:400px;
margin: 100px auto 0;
}
* { margin:0; padding:0; }
</style>
<link rel="stylesheet" href="slider.css">
</head>
<center>
<h1>Web Client Programming</h1>
<h2>Lab 18</h2>
<h2>John Diaz</h2>
<body style="background-color:#FFC">

<body>
<center>
<br>
<center>
<p>Left to Right </p>
</center>

<br>
<div class="slider" id="swag">
<ul>
<li><img src="image1.jpg" height="300" width="400"alt="image"/></li>
<li><img src="image2.jpg" height="300" width="400"alt="image"/></li>
<li><img src="image3.jpg" height="300" width="400"alt="image"/></li>
<li><img src="image4.jpg" height="300" width="400"alt="image"/></li>
</ul>
</div>

<div id="slider-nav">
<button data-direction="prev">Previous</button>
<button data-direction="next">Next</button>
</div></center>

<br>
<center>
<p>Top to bottom </p>
</center>

<br>
<div class="slider1" id="batman">
<ul>
<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>

</ul>
</div>

<div id="slider-nav1">

<button data-direction="previous">Previous</button>
<button data-direction="next">Next</button>
</div>
<br>
<center>
<p>Right to Left </p>
</center>

<br>
<div class="slider2" id="cookie">
<ul>
<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>

</ul>
</div>

<div id="slider-nav2">

<button data-direction="previous">Previous</button>
<button data-direction="next">Next</button>
</div>

<br>
<center>
<p>Bottom and Top </p>
</center>

<br>
<div class="slider3" id="fox">
<ul>
<li><img src="image1.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image2.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image3.jpg"height="300" width="400" alt="image"/></li>
<li><img src="image4.jpg"height="300" width="400" alt="image"/></li>


</ul>
</div>
<div id="slider-nav3">

<button data-direction="previous">Previous</button>
<button data-direction="next">Next</button>
</div>
<div class="box"></div>
<script src="../../jquery-2.1.1 (1).js"/></script>

<script src="slider.js"/></script>

As you can see I used many br, li, ul and div tags in my code for this lab. I also used button data direction tags, which is what allowed the images to be moved one by one. With these tags I create line breaks, lists, unordered lists and tables which organize the boxes.


Though all this code is important here is the code for my javascript:

// JavaScript Document
(function($){
 var sliderUL=$('div.slider').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,//600
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-left':unit ? (unit + loc) : loc
 });
}

})(jQuery);
//
//
// 

(function($){
 var sliderUL=$('div.slider1').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav1').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-top':unit ? (unit + loc) : loc
 });
}
})(jQuery);
//
//
//
(function($){
 var sliderUL=$('div.slider2').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav2').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc,direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-right':unit ? (unit + loc) : loc
 });
}

})(jQuery);
//
//
//
(function($){
 var sliderUL=$('div.slider3').css('overflow', 'hidden').children('ul'),
 imgs= sliderUL.find('img'),
 imgWidth=imgs[0].width,
 imgsLen=imgs.length,
 current=1,
 totalImgsWidth=imgsLen* imgWidth;
 $('#slider-nav3').show().find('button').on('click',function(){
  var direction=$(this).data('dir');
  loc=imgWidth;
 
  (direction=='next')? ++current:--current;
 if(current===0){
  current= imgsLen;
  loc= totalImgsWidth-imgWidth;
  direction='next';
 }else if(current-1===imgsLen){
  current=1;
  loc=0;
 }
 
 transition( sliderUL, loc, direction);
 });
 
 function transition(container, loc, direction){
  var unit;
  if(direction && loc!==0){
   unit=(direction==='next')?'-=':'+=';
   
  }
  container.animate({
   'margin-top':unit ? (unit + loc) : loc
 });
}
})(jQuery);




This code is what allows for the transition from image to image, the function so that it may be animated. Also so that it may transition, each slider, 1 to 4 would move according to the  code  accompanying it.


















Posted by



at







































No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)