article:
Other: Terms of Service Generator and Privacy Policy Generator
article:
Ideea: Dealin menu - User Experience

Plugin: iPicture

Advertisement

The first plugin with configuration wizard. iPicture is a jQuery Plugin to create interactive pictures with extra descriptions.

Plugin: iPicture


Configure

<ul id="iPicture">
  <li id="picture1" style="background: url('images/image1.jpg')"></li>
  <li id="picture2" style="background: url('images/image2.jpg')"></li>
  <li id="picture3" style="background: url('images/image3.jpg')"></li>
  <li id="picture4" style="background: url('images/image4.jpg')"></li>
</ul>

use

<style>
  #picture1, #picture2, #picture3, #picture4{
     width: 900px;      //images width
     height: 528px;     //images height
     position: relative;
     margin:0 auto;
  }
</style>

or

<script type="text/javascript">
  jQuery(document).ready(function(){
    $( "#iPicture" ).iPicture({
      pictures: ["picture1","picture2","picture3", ...all pictures' ID],
      moreInfos:{
        "picture1":[
          {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
          {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
          {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
          {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
          ... each photo and its tooltips ...}
    });
</script>



source
demo furniture shop
demo car showroom
demo clothing shop
download

Advertisement
Tags: plugin, tooltip, picture, jquery, design, develop, internet, web, desktop, layout

Leave a Comment

No Comment

© Creative3x Ltd.