Listing 7.1: basic jQuery Cycle cycle() use.

Chapter 7/07.js

@@ -1,6 +1,3 @@
-// This is the custom JavaScript file referenced by index.html. You will notice
-// that this file is currently empty. By adding code to this empty file and
-// then viewing index.html in a browser, you can experiment with the example
-// page or follow along with the examples in the book.
-//
-// See README.txt for more information.
+$(document).ready(function () {
+  $('#books').cycle();
+});

Chapter 7/07.scss

@@ -0,0 +1,151 @@
+$black: #000;
+$white: #fff;
+$link: #06581f;
+$packt: #f79321;
+
+/***************************************
+   Default Styles
+***************************************/
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 62.5% Verdana, Helvetica, Arial, sans-serif;
+  color: $black;
+  background: $white;
+}
+#container {
+  font-size: 1.2em;
+  margin: 10px 2em;
+}
+
+h1 {
+  font-size: 2.5em;
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 1.3em;
+  margin-bottom: .5em;
+}
+h3 {
+  font-size: 1.1em;
+  margin-bottom: 0;
+}
+
+code {
+  font-size: 1.2em;
+}
+
+a {
+  color: $link;
+}
+
+
+/***************************************
+   Chapter Styles
+***************************************/
+
+ul#books {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 210px;
+  width: 500px;
+  overflow: hidden;
+}
+ul#books li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 210px;
+  width: 500px;
+  background-color: $packt;
+  position: relative;
+}
+ul#books li img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 300px;
+  height: 210px;
+}
+ul#books li .title {
+  margin-left: 300px;
+  padding: 10px;
+  width: 180px;
+  font-weight: bold;
+  font-size: 1.2em;
+  background-color: $black;
+  color: $white;
+  overflow: hidden;
+}
+ul#books li .author {
+  margin-left: 300px;
+  padding: 10px 10px 0 10px;
+  width: 180px;
+  font-weight: bold;
+  background-color: #F79321;
+  color: $white;
+}
+
+#books-controls {
+  margin: 10px 0;
+  width: 500px;
+}
+#books-controls button {
+  margin: 0 10px 10px 0;
+  float: left;
+}
+#books-controls #slider {
+  clear: left;
+  margin: 10px 0;
+}
+
+h1 {
+  text-align: center;
+  border: 0 solid $white;
+  width: 500px;
+  margin-bottom: 20px;
+}
+h1.highlighted {
+  border: 10px solid #F79321;
+  padding: 10px;
+  width: 460px;
+  margin-bottom: 0;
+  background-color: $black;
+  color: $packt;
+}
+
+#books .ui-resizable-s {
+  bottom: 0;
+}
+
+.ui-content img {
+  display: block;
+}
+.ui-content .title {
+  padding: 10px;
+  margin: 0;
+  width: 280px;
+  font-weight: bold;
+  font-size: 18px;
+  background-color: $packt;
+  color: $white;
+  text-shadow: none;
+}
+.ui-content .author {
+  padding: 10px;
+  margin: 0;
+  width: 280px;
+  font-weight: bold;
+  font-size: 14px;
+  background-color: $packt;
+  color: $white;
+  text-shadow: none;
+}
+
+

Chapter 7/booklist.scss

@@ -0,0 +1,30 @@
+$black: #000;
+$packt: #F79321;
+
+.ui-content img {
+  display: block;
+  width: 300px;
+  height: 210px;
+}
+.ui-content .title {
+  padding: 10px;
+  margin: 0;
+  width: 280px;
+  font-weight: bold;
+/*  font-size: 18px;*/
+  background-color: $black;
+  color: #fff;
+  text-shadow: none;
+}
+.ui-content .author {
+  padding: 10px;
+  margin: 0;
+  width: 280px;
+  font-weight: bold;
+/*  font-size: 14px;*/
+  background-color: $packt;
+  color: #fff;
+  text-shadow: none;
+}
+
+