Friday, April 26, 2013

Image Slider Gallery Script in jQuery | Simple jquery code in Jquery | image slider in jquery

Now most of site are using image gallery and slider feature to your websites. Its very eye catching practice for user prospective.

But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.

But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.

Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.

HTML Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Gallery</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/GalleryJson.js" type="text/javascript"></script>
    <style type="text/css">
        body{background: #ddd;}
       .container img,.container a{width: 100px;height: 100px;border: none;}
        .container ul{float: left;margin: 0;padding: 0;position: relative;}
        .container li{display: inline;list-style-type: none;margin-right: 10px;float:left;}
        .container li img{border: solid 2px transparent;}
        .container .disable{cursor: default;color: #999;}
        .container{position: relative;float: left;width: 100px;overflow: hidden;}
    </style>
</head>
<body>
    <div class="container" id="gallery1">
        <ul class="gal">
            <li><a href="javascript:void(0);">
                <img src="css/1.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/2.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/3.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/4.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/5.jpg" /></a></li>
            <li><a href="javascript:void(0);">
                <img src="css/2.jpg" /></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            gallery({
                gallery: "gallery1",// Mandatory
                next: "next1", // optional default value "gallery1next"
                prev: "prev2", // optional default value "gallery1prev"
                slide: 2, // optional default value 1
                auto: true // optional default value False
            });
        });
    </script>
</body>
</html>

Here I am providing GalleryJson.js source code with detail.

Jquery Script Code
gallery = function (options) {
    var counter = 0;
    var defaults = { "next": options.gallery + "next", "prev": options.gallery + "prev", "slide": 1, "auto": false };
    var obj = $.extend(defaults, options);

    var liWidth = $("#" + obj.gallery).find("li").outerWidth(true); // Width of single li
    var liCount = $("#" + obj.gallery).find("li").length; // Count of lis into UL

    // Insert Previous and Next button into gallary
    $("#" + obj.gallery).append('<a href="#" class="' + obj.prev + '">Prev</a> &nbsp;&nbsp;&nbsp; <a href="#" class="' + obj.next + '">Next</a>');
    $("#" + obj.gallery).find("ul").width(liWidth * liCount);  // Calculate gallary total width
    $("#" + obj.gallery).width(liWidth * obj.slide); // Set width of wrapper according to thumbnail count;


    if (counter == 0) // Default disable status for previous button on page load
    {
        $($("." + obj.prev)).addClass("disable");
    }


    // Code for previous button Click
    $("." + obj.prev).on("click", function () {
        if (counter > 0) {
            counter--;
            $("." + obj.next).removeClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": "+=" + liWidth });
            if (counter == 0) { $(this).addClass("disable"); }
        }
        else { $(this).addClass("disable"); }
    });


    // Code for nexgt button Click
    $("." + obj.next).on("click", function () {
        if (counter < (liCount - obj.slide)) {
            counter++;
            $("." + obj.prev).removeClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": "-=" + liWidth });
            if (counter == (liCount - obj.slide)) { $(this).addClass("disable"); }
        }
        else { $(this).addClass("disable"); }
    });


    // Auto Run Script Start Here
    if (obj.auto == true) {
        t = setTimeout(function () { autorun() }, 2000);
    }


    function autorun() {
        clearTimeout(t);
        if ($("#" + obj.gallery).find("." + obj.next).hasClass("disable")) {
            $("." + obj.prev).addClass("disable");
            $("#" + obj.gallery).find("ul").animate({ "left": 0 });
            $("." + obj.next).removeClass("disable");
            counter = 0;
        }
        else {
            $("." + obj.next).trigger("click");
        }
        t = setTimeout(function () { autorun() }, 2000);
    }
    // Auto Run Script Ends Here
};

Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.

If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.

Thursday, April 11, 2013

Calculate dynamic height of iFrame | how to calculate content height of iFrame | Acces iframe parent tag id

Using iFrame is very wrong approach to achieve any functionality. But due to some reasons we have to use iframe in our application.

After using iframe in application our main problem becomes that how to give it dynamic height. As we all know that in dynamic site we can't fix our content height. after long time gooling i found best script which can set its height after calculating its content height.

Not only you can set its height according to its height also you can change attribute of iframe parent ID also.

I hope this will help to work with iframe and make your task easy.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
   
        function resizeIframe(iframeID) {
            var iframe = window.parent.document.getElementById(iframeID);
            var container = document.getElementById('content');
            iframe.style.height = container.offsetHeight + 'px';
        } 
    </script>
</head>
<body>
    <div id="content">
        What I have done in the past is use a trigger from the iframe'd page in window.onload
        (NOT domready, as it can take a while for images to load) to pass the page's body
        height to the parent.What I have done in the past is use a trigger from the iframe'd
        page in window.onload (NOT domready, as it can take a while for images to load)
        to pass the page's body height to the parent.What I have done in the past is use
        a trigger from the iframe'd page in window.onload (NOT domready, as it can take
        a while for images to load) to pass the page's body height to the parent.What I
        have done in the past is use a trigger from the iframe'd page in window.onload (NOT
        domready, as it can take a while for images to load) to pass the page's body height
        to the parent.What I have done in the past is use a trigger from the iframe'd page
        in window.onload (NOT domready, as it can take a while for images to load) to pass
        the page's body height to the parent.</div>
    </div>
    <script type="text/javascript">
        resizeIframe('slideshow_frame');
    </script>
</body>
</html>

Just copy and paste this code block in your iframe.

I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.