^

Browse Plants

How it Works

  1. Insert the jQuery Google CDN before the closing body tag in your HTML file. This adds the jQuery library to your project.
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    				
  2. Download the Cycle2 plugin (Production Version) here. Then add this script before the closing body tag in your HTML file.
     <script src="scripts/jquery.cycle2.min.js"></script>
    			
  3. Add the following code to your corresponding HTML & CSS files. The data-cycle attributes in the HTML code directly manipulate the cycle2 slideshow, so you do not need to modify the javascript code itself. The images in this slideshow are also linkable.
    
    
    
    .cycle-slideshow {
    	margin: 0 auto;
    	width: 50%;
    	height: 255px;
    }
    
    .cycle-slideshow > a { 
        position: absolute; 
        top: 0; 
        left: 0;
        width: 100%; 
        padding: 0; 
        display: block;
    }
    
    .cycle-slideshow > a > img { 
        position: static;
        display: block;
        margin: 0 auto;
    }
    
    .cycle-slideshow > a {
    	display: none;
    }
    
    .cycle-slideshow > div { 
        position: absolute; 
        top: 0; 
        left: 0;
        width: 50%; 
        padding: 0;
    }
    
    .slideshow-container {
    	position: relative;
    	width: 70%;
    	margin: 0 auto;
    	padding: 25px 0;
    }
    
    #prev, 
    #next {
    	font-size: 40px;
    	position: absolute;
    	z-index: 900;
    }
    
    #prev {
    	top: 33%;
    	left: 18%
    }
    
    #next {
    	top: 33%;
    	right: 18%;
    }
    
    #prev:hover, 
    #next:hover {
    	text-shadow: 0 0 8px white;
    }
    
    .cycle-pager { 
        text-align: center; 
        width: 100%; 
        z-index: 500; 
        overflow: hidden;
        margin-top: 25px;
    }
    
    .cycle-pager span { 
        font-family: arial; 
        font-size: 50px; 
        width: 16px; 
        height: 16px; 
        display: inline-block; 
        color: rgba(127, 160, 212, 1);
        cursor: pointer; 
    }
    
    .cycle-pager span.cycle-pager-active { 
    	color: rgba(0,0,0,0.4);	
    }
    
    .cycle-pager > * { 
    	cursor: pointer;
    }