| Portfolio Image Navigation with jQuery |
joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.
The Markup
For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside:
<code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"portfolio"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"background"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">> </code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"arrows"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"up"</code><code class="xml plain">>Up</</code><code class="xml keyword">a</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"down"</code><code class="xml plain">>Down</</code><code class="xml keyword">a</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"prev"</code><code class="xml plain">>Previous</</code><code class="xml keyword">a</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"next"</code><code class="xml plain">>Next</</code><code class="xml keyword">a</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"gallery"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"inside"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"item"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/1.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image1"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/2.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image2"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/3.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image3"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"item"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/4.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image4"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/5.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image5"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"item"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/6.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image6"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code><code class="xml plain">><</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"images/7.jpg"</code> <code class="xml color1">alt</code><code class="xml plain">=</code><code class="xml string">"image7"</code> <code class="xml plain">/></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain">...</code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"item"</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain">...</code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml spaces"> </code><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code> <code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code>
Now, let’s take a look at the style.
The CSS
First, let’s define the style for the main container. We’ll set it’s position to be fixed and center it in the screen with the 50% and negative margin technique:
<code class="css plain">#portfolio {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">fixed</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">1</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">1000px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">500px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">:</code><code class="css value">-250px</code> <code class="css value">0</code> <code class="css value">0</code> <code class="css value">-500px</code><code class="css plain">;</code>
<code class="css plain">}</code>
The background will also be fixed and we’ll add a background image that creates the spotlight effect:
<code class="css value">#bac</code><code class="css plain">kground {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">fixed</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">2</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">url</code><code class="css plain">(../images/bg.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code><code class="css plain">;</code>
<code class="css plain">}</code>
The gallery will be positioned absolutely, just like it’s inner div:
<code class="css plain">#portfolio .gallery,</code>
<code class="css plain">#portfolio .gallery .</code><code class="css value">inside</code> <code class="css plain">{</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css plain">}</code>
The gallery will also occupy all the space of the portfolio:
<code class="css plain">#portfolio .gallery {</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">overflow</code><code class="css plain">:</code><code class="css value">hidden</code><code class="css plain">;</code>
<code class="css plain">}</code>
We’ll fix the z-index of the inside div in order for keeping the stacking right:
<code class="css plain">#portfolio .gallery .</code><code class="css value">inside</code> <code class="css plain">{</code>
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">1</code><code class="css plain">;</code>
<code class="css plain">}</code>
Now, we’ll style the arrows. First, we’ll define the common style:
<code class="css plain">#portfolio .arrows a {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">3</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">32px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">32px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">background-image</code><code class="css plain">:</code><code class="css value">url</code><code class="css plain">(../images/arrows.png);</code>
<code class="css spaces"> </code><code class="css keyword">background-repeat</code><code class="css plain">:</code><code class="css value">no-repeat</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">outline</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">text-indent</code><code class="css plain">:</code><code class="css value">-9999px</code><code class="css plain">;</code>
<code class="css plain">}</code>
And then we’ll style all the single arrows:
<code class="css plain">#portfolio .arrows .prev,</code>
<code class="css plain">#portfolio .arrows .up {</code>
<code class="css spaces"> </code><code class="css keyword">display</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .up,</code>
<code class="css plain">#portfolio .arrows .down {</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">-16px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .prev,</code>
<code class="css plain">#portfolio .arrows .next {</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">180px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .up {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">0</code> <code class="css value">-64px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">20px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .down {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">0</code> <code class="css value">-96px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">bottom</code><code class="css plain">:</code><code class="css value">120px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .prev {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">0</code> <code class="css value">-32px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">60px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .next {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">0</code> <code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">right</code><code class="css plain">:</code><code class="css value">60px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .up:hover {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">-32px</code> <code class="css value">-64px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .down:hover {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">-32px</code> <code class="css value">-96px</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .next:hover {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">-32px</code> <code class="css value">0</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .arrows .prev:hover {</code>
<code class="css spaces"> </code><code class="css keyword">background-position</code><code class="css plain">:</code><code class="css value">-32px</code> <code class="css value">-32px</code><code class="css plain">;</code>
<code class="css plain">}</code>
The item divs, which are our wrappers for the image sets will be styled as follows:
<code class="css plain">#portfolio .item {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">1000px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">400px</code><code class="css plain">;</code>
<code class="css plain">}</code>
Each image wrapper will be positioned absolutely, too and occupy all the space:
<code class="css plain">#portfolio .item div {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">:</code><code class="css value">100%</code><code class="css plain">;</code>
<code class="css plain">}</code>
Each image will be centered. Keep in mind that in our example we are using images with a width of 600px, so if you use different ones, you need to adapt this:
<code class="css plain">#portfolio .item div img {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">-300px</code><code class="css plain">;</code>
<code class="css plain">}</code>
Let’s style the little boxes navigation which will be added dynamically:
<code class="css plain">#portfolio .paths {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">bottom</code><code class="css plain">:</code><code class="css value">60px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">50%</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">margin-left</code><code class="css plain">:</code><code class="css value">-30px</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">z-index</code><code class="css plain">:</code><code class="css value">4</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .paths div {</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">top</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .paths a {</code>
<code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#333</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">display</code><code class="css plain">:</code><code class="css value">block</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">position</code><code class="css plain">:</code><code class="css value">absolute</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">left</code><code class="css plain">:</code><code class="css value">0</code><code class="css plain">;</code>
<code class="css spaces"> </code><code class="css keyword">outline</code><code class="css plain">:</code><code class="css value">none</code><code class="css plain">;</code>
<code class="css plain">}</code>
<code class="css plain">#portfolio .paths a:hover,</code>
<code class="css plain">#portfolio .paths .active {</code>
<code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">:</code><code class="css value">#fff</code><code class="css plain">;</code>
<code class="css plain">}</code>
And that’s all the style!
The JavaScript
In this part, we’ll show you how to initialize the plugin.
In the head of our HTML file, we will include the following three scripts:
<code class="js plain"><script src=</code><code class="js string">"js/jquery.js"</code> <code class="js plain">type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code> <code class="js plain"><script src=</code><code class="js string">"js/portfolio.js"</code> <code class="js plain">type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code> <code class="js plain"><script src=</code><code class="js string">"js/init.js"</code> <code class="js plain">type=</code><code class="js string">"text/javascript"</code><code class="js plain">></code>
The first one is the jQuery library, the second one is our plugin and the third one is the initialization script:
<code class="js keyword">var</code> <code class="js plain">o = {</code>
<code class="js spaces"> </code><code class="js plain">init: </code><code class="js keyword">function</code><code class="js plain">(){</code>
<code class="js spaces"> </code><code class="js keyword">this</code><code class="js plain">.portfolio.init();</code>
<code class="js spaces"> </code><code class="js plain">},</code>
<code class="js spaces"> </code><code class="js plain">portfolio: {</code>
<code class="js spaces"> </code><code class="js plain">data: {</code>
<code class="js spaces"> </code><code class="js plain">},</code>
<code class="js spaces"> </code><code class="js plain">init: </code><code class="js keyword">function</code><code class="js plain">(){</code>
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#portfolio'</code><code class="js plain">).portfolio(o.portfolio.data);</code>
<code class="js spaces"> </code><code class="js plain">}</code>
<code class="js spaces"> </code><code class="js plain">}</code>
<code class="js plain">}</code>
<code class="js plain">$(</code><code class="js keyword">function</code><code class="js plain">(){ o.init(); });</code>
The default option values for our plugin are the following:
<code class="js plain">$(</code><code class="js string">'#portfolio'</code><code class="js plain">).portfolio({</code>
<code class="js spaces"> </code><code class="js plain">image: {</code>
<code class="js spaces"> </code><code class="js plain">width: 600,</code>
<code class="js spaces"> </code><code class="js plain">height: 400,</code>
<code class="js spaces"> </code><code class="js plain">margin: 20</code>
<code class="js spaces"> </code><code class="js plain">},</code>
<code class="js spaces"> </code><code class="js plain">path: {</code>
<code class="js spaces"> </code><code class="js plain">width: 10,</code>
<code class="js spaces"> </code><code class="js plain">height: 10,</code>
<code class="js spaces"> </code><code class="js plain">marginTop: 5,</code>
<code class="js spaces"> </code><code class="js plain">marginLeft: 5</code>
<code class="js spaces"> </code><code class="js plain">},</code>
<code class="js spaces"> </code><code class="js plain">animationSpeed: 400</code>
<code class="js plain">});</code>
The image options are the width, height and the margin between the images. The path options define the aspect of the little navigation boxes, how big they should be and how much margin they should have. Last, the animation speed can be adjusted.
Stay tuned for the next tutorial!
Download:tympanus.net/Tutorials/PortfolioImageNavigation/PortfolioImageNavigation.zip
Nếu bạn không download được hoặc có vấn đề gì hãy viết comments vào form dưới hoặc liên hệ
Tin mới hơn:
- Nivo Slider jQuery Plugin
- A Slick jQuery Image Slider Plugin
- TN3 Gallery jQuery image gallery with slideshow
- Awkward Showcase – A jQuery Plugin
- Content Rotator with jQuery
Tin cũ hơn:
- Image Zoom Tour with jQuery
- Fullscreen Image 3D Effect with CSS3 and jQuery
- 3D Gallery with CSS3 and jQuery
- Rotating Image Slider with jQuery
- Parallax Slider with jQuery
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
Hostting Features:
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...
