menu

Saturday, 23 August 2014

Lightbox Jquery Free Download - Lightbox Gallery




<html lang="en-us">
<head>
     <meta charset="utf-8">

     <title>Lightbox</title>

    
     <link rel="stylesheet" href="css/screen.css">
     <link rel="stylesheet" href="css/lightbox.css">
   
     <script src="js/jquery-1.11.0.min.js"></script>
     <script src="js/lightbox.js"></script>

    
</head>
<body>

<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set"><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
                           <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set"><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
                           <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set"><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
                           <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set"><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>

</body>
</html>





Download Source...


Posted by at No comments:

Price Slider with two knobs....


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dheerendra Verma</title>
<link rel="stylesheet" href="css/slider.css" />

<script type="text/javascript" src="mootools12_all_p.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript" >

    // ON LOAD
    window.addEvent('domready', function () {
        var mySlideA = new Slider($('slider_minmax_gutter_m'), $('slider_minmax_minKnobA'), $('slider_bkg_img'), {
            start: 0,
            end: 5,
            offset: 8,
            snap: false,
            onChange: function (pos) { $('slider_minmax_min').setHTML('min ' + pos.minpos); $('slider_minmax_max').setHTML('max ' + pos.maxpos); }
        }, $('slider_minmax_maxKnobA')).setMin(2).setMax(3);

        var mySlideB = new Slider($('slider_gutter_1'), $('slider_knob_1'), $('slider_bkg_img_1'), {
            start: 0,
            end: 120,
            offset: 10,
            onChange: function (pos) {
                $('slider_current_val').setHTML(pos + ' inches');

            }
        }, null).setMin(100);
        $('slider_current_val').setHTML(100 + ' inches');

        // In this slilder example silder moves 10 steps with an increament of 15 in every step
        var mySlideC = new Slider($('slider_gutter_C'), $('slider_knob_C'), $('slider_bkg_img_C'), {
            start: 0,
            end: 150,
            offset: 0,
            snap: true,
            numsteps: 10,
            onChange: function (pos) {
                $('slider_current_val_2').setHTML(pos + ' inches');

            }
        }, null).setMin(30);
        $('slider_current_val_2').setHTML(30 + ' inches');

    });


</script>


<style>
body {
     margin:25px;
     font-family:"trebuchet MS", Tahoma;
     font-size:13px;
     border:1px solid #cfcfcf;
     padding:20px;
}
.clearfix {
     clear:both;
     display:block;
}
.text {
     color:#555555;
}
</style>


</head>

</body>

<div class="slider_outer" >
  <h3>Price Range</h3>
  <div class="slide_container" >
    <div id="slider_minmax_min"  class="floatl fontblue"> </div>
    <div class="slider_gutter" id="minmax_slider" >
      <div id="slider_minmax_gutter_l" class="slider_gutter_item iconsprite_controls"></div>
      <div id="slider_minmax_gutter_m" class="slider_gutter_item gutter iconsprite_controls">
      
        <img id="slider_bkg_img" src="images/bkg_slider.gif"/>
        <div id="slider_minmax_minKnobA" class="knob"></div>
        <div id="slider_minmax_maxKnobA" class="knob"></div>
      </div>
      <div id="slider_minmax_gutter_r" class="slider_gutter_item iconsprite_controls"> </div>
    </div>
    <div id="slider_minmax_max" class="floatl fontblue"> </div>
    <div class="clearfix"></div>
  </div>
</div>





</body>
</html>



Download Source Code

Posted by at 2 comments:
Subscribe to: Posts (Atom)