egg

by FEKING

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://m.xblix.ca/sources/egg.js"></script>
<select name="test" id="dropdown_demo" class="egg_imagedropdown">
  <option>http://imageshack.us/a/img580/4650/testfe.png</option>
  <option>http://imageshack.us/a/img707/6396/test2gad.png</option>
  <option>http://imageshack.us/a/img838/6306/test3uq.png</option>
</select>

CSS

/* Egg Plugin Pack */





/* General */




/* Accordion */
.egg_accordion{
    margin:auto;
    overflow:hidden;
}

.egg_accordionSlide{
    float:left;
    overflow:hidden;
    position:relative;
    padding:0;
    margin:0;
    background-color:black;
}

.egg_accordionSlide img{

}

.egg_accordionSlide a img, .egg_accordionSlide a div img{border:none;}



/* Slideshow */
.egg_slideshow{
    overflow:hidden;
    width:500px;
    height:300px;
    position:relative;
    background-color:white;
}

.egg_slideshow_runner{
    position:absolute;
    left:0px;
    top:0px;
    height:300px;
    overflow:hidden;
}

.egg_slideshow .egg_slide{
    position:absolute;
    left:0px;
    top:0px;
    width:500px;
    height:300px;
    overflow:hidden;
}

.egg_slideshow .egg_slide a img.egg_slide_image{
    width:500px;
}

.egg_slideshow .egg_slide .egg_slide_extract{
    position:absolute;
    left:15px;
    top:15px;
    padding:5px;
    z-index:999;
    background-color:#444444;
    color:white;
    font-family:tahoma;
    font-size:12px;
}

.egg_slideshow .egg_slide .egg_slide_extract a{
    color:white;
}

.egg_slide-arrow-right{
    width:7px;
    height:13px;
    background-image:url('arrow-right.png');
    cursor:pointer;
    position:absolute;
    right:5px;
    z-index:999;
}

.egg_slide-arrow-left{
    width:7px;
    height:13px;
    background-image:url('arrow-left.png');
    cursor:pointer;
    position:absolute;
    left:5px;
    z-index:999;
}

.egg_slideshow_block{
    float:left;
    width:7px;
    height:7px;
    background-color:white;
    margin-left:3px;
    margin-right:3px;
    
    -moz-box-shadow: 1px 1px 3px #aaa;
    -webkit-box-shadow: 1px 1px 3px #aaa;
    box-shadow: 1px 1px 3px #aaa;
}

.egg_slideshow_block:hover{
    background-color:#cccccc !important;
}

.egg_slideshow_block_selected{
    background-color:#777777 !important;
}

.egg_slideshow_block_container{
    position:absolute;
    bottom:15px;
    height:10px;
   ...

JavaScript

$(document).ready(function(){
$('.egg_imagedropdown').EggImageDropdown();

});