designersdairy: May 2015

Wednesday, May 27, 2015

Migrating old jquery plugin to avoid conflict of new jquery plugins

Welcome to Designer Blog here i have posted how to avoid conflict of Old & New jquery plugins

Jquery Migrate Plugin

We have created the jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on jQuery 1.9 and later. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

Step1:

Include the migrate plugin within the latest jquery version you can work both old & new jquery

library plugins which was developed by jquery

using thejquery-migrate-1.2.1.min.js

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>



<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>





Step2:

Enjoy  Folks

Tuesday, May 26, 2015

Welcome to Designer Blog here i have posted how to make use of the jquery plugin in useful way

Source:

http://fancyapps.com/fancybox/

FancyBox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html

content and multi-media on your webpages. It is built on the top of the popular JavaScript

framework jQuery and is both easy to implement and a snap to customize.

Instructions

Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

</script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js">

</script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5"

 type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">

</script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5"

 type="text/css" media="screen" />

 <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5">

</script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6">

</script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"

 type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7">

</script>

Note:

ID's are single use and are only applied to one element. Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value.

Script uses the `href` or `data-fancybox-href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute. Use `title` or `data-fancybox-title` attribute to specify item caption.
StyleSheet:

<style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }


        .row
{
    clear:both;
}
.pull-left
{
    float:left; margin-right:20px;
}
.pull-right
{
    float:right;
    margin-right:20px;
}
p
{
    margin:0px;
    padding:0px;
}
.hide
{
    display:none;
}

    </style>

Javascript:

Thursday, May 21, 2015

Carousel Slider with javascript

Welcome to Designer Blog here i have posted carousel slider with JavaScript

Step1:

This the output

BJSlider:

Step2:
BJSlider:
/**************************** SPLASH CONTROL *******************************/
BJSlider = {
    container_id:'splash',
    element_selector:'section',
    nav_id : 'splash_nav',
    active_class: 'active',
    nav_parent_selector: 'container-parent', /*Selector to append the nav div inside. If 'container-parent' value, main containers parent is searched.*/
    start_element: 0,
    max_width_mobiles: 960,
    time_interval: 1000 /*value > 1000*/
};

$(document).ready(function(){
    splash_num = $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).length;
    if(BJSlider.nav_parent_selector === 'container-parent'){
        $("#"+BJSlider.container_id).parent().append("<div id='"+BJSlider.nav_id+"'><ul></ul></div>");
    }else{
        $(BJSlider.nav_parent_selector).append("<div id='"+BJSlider.nav_id+"'><ul></ul></div>");
    }

    for (t = 0; t < splash_num; t++) {
        $("#"+BJSlider.nav_id+" ul").append('<li></li>');
    }

    current_splash = BJSlider.start_element;
    $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();


    splash_interval = setInterval(function () {
        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeOut(500);}
        else {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).hide();}

        if (current_splash === splash_num - 1) {current_splash = 0;}
        else {current_splash++;}

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeIn(1000);}
        else{$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();}

        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).addClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);

    }, BJSlider.time_interval);
});

$(document).on('click',"#"+BJSlider.nav_id+" li", function () {
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).fadeOut();
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);

    $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

    $(this).addClass(BJSlider.active_class);
    splash_interval = window.clearInterval(splash_interval);

    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq($("#"+BJSlider.nav_id+" li").index(this)).fadeIn();
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq($("#"+BJSlider.nav_id+" li").index(this)).addClass(BJSlider.active_class);

});

$( "#splash") .mouseenter(function() {
window.clearInterval(splash_interval);
})
.mouseleave(function() {
splash_interval = setInterval(function () {
        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeOut(500);}
        else {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).hide();}

        if (current_splash === splash_num - 1) {current_splash = 0;}
        else {current_splash++;}

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeIn(1000);}
        else{$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();}

        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).addClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);

    }, BJSlider.time_interval);
});

Step3:

Style:

#splash {
position: relative;
height: 400px;
overflow: hidden;
}

#splash img {
position: absolute;
left: -100%;
top: -100%;
right: -100%;
bottom: -100%;
margin: auto;
min-width: 600px;
}

#splash > section {
display: none;
height: 400px;
}

#splash div {
position: relative;
z-index: 2;
}

#splash_nav {
width: 100%;
position: relative;
float: left;
text-align: center;
min-height: 18px;
margin: 10px 0 0;
}

#splash_nav ul { margin: 0; }

#splash_nav li {
display: inline-block;
width: 8px;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition-duration: none;
height: 8px;
border-radius: 4px;
background-color: #ccc;
margin: 5px;
cursor: pointer;
}

#splash_nav li:hover { background-color: #777; }

#splash_nav li.active { background-color: #222; }

Step4:

HTML Code:
<section id="splash">
<section> <img id="img1" src="https://unsplash.it/2000/1330?image=632" alt="Example 1" />
    <div>
      <h1>Image Caption 1</h1>
      <h2>More Description.</h2>
    </div>
</section>
<section> <img id="img2" src="https://unsplash.it/2000/1330?image=628" alt="Example 2" />
    <div>
      <h1>Image Caption 2</h1>
      <h2>More Description.</h2>
    </div>
</section>
<section> <img id="img3" src="https://unsplash.it/2000/1330?image=634" alt="Example 3" />
    <div>
      <h1>Image Caption 3</h1>
      <h2>More Description.</h2>
    </div>
</section>
</section>

Step5:

Enjoy Folks

Sources

http://www.jqueryscript.net/slider/Basic-Full-width-Image-Slider-Plugin-with-jQuery.html

designersdairy

Search This Blog