Member Avatar for neha05
neha05 0 Junior Poster in Training 
Facing issue when splitting a image ,when image size is bigger,it split only part of tht image or i want that any size of image show properly according to div size after splitting.`Inline Code Example Here`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PicStrips example</title>
<!--<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="picstrips-1.0-min.js"></script>
</head>

<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/other/jQuery-Plugin-For-Splitting-An-Image-To-Strips-PicStrips.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;">jQuery PicStrips example</h1>
<div class="demo"><img src="Fulmer_Falls_Wide_View_3000px.jpg" width="600px" height="300px;" id="example"></div>
<script>
$("#example").picstrips ({
    splits: 2, 
    hgutter: '5px', 
    vgutter: '0px', 
    bgcolor: '#fff'
});
</script>

<html>
<head>
<meta charset="utf-8">
<title>jQuery PicStrips example</title>
<!--<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="picstrips-1.0-min.js"></script>
</head>

<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/other/jQuery-Plugin-For-Splitting-An-Image-To-Strips-PicStrips.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;">jQuery PicStrips example</h1>
<div class="demo"><img src="Fulmer_Falls_Wide_View_3000px.jpg" width="600px" height="300px;" id="example"></div>
<script>
$("#example").picstrips ({
    splits: 2, 
    hgutter: '5px', 
    vgutter: '0px', 
    bgcolor: '#fff'
});
</script>
</body>
</html>




/*
picstrips by Steve Claridge (http://www.moreofless.co.uk)
*/
(function( $ ){

  $.fn.picstrips = function( options ) {  

    var settings = $.extend( {
      'splits': 2, 
      'hgutter': '0px', 
      'vgutter': '2px', 
      'bgcolor': '#fff'
    }, options );

    return this.each( function() {     

      var that = this;   

      function doStrips() {
        var h = $(that).height(),
            w = $(that).width(),
            sw = (w / settings.splits), //width of a strip
            clstyle = "position: relative; float:left; margin-right: " + settings.hgutter + "; background-image: url('" + that.src + "'); width: " + sw + "px; height: " + h + "px;",
            spstyle = "position: absolute; left: 0px; width: " + sw + "px; height: " + settings.vgutter + "; background-color: " + settings.bgcolor + "; top: ";

        var cnt = $("[id^=molbars_]").length + 1;

        $( '<div id="molbars_' + cnt + '"></div>' ).insertAfter( $(that) );

        for ( var lp = 0; lp < settings.splits; lp++ ) {
          var voffs = lp % 2 != 0 ? '0px' : (h - parseInt( settings.vgutter )) + 'px';
          clstyle += " background-position: -" + (w - ((settings.splits - lp) * sw)) + "px 100%;";
          $( '<div style="' + clstyle + '"><span style="' + spstyle + voffs + '"></span></div>' ).appendTo( $( '#molbars_' + cnt ) );  
        };
        $(that).hide();
      }

      //make sure image has finished loading
      if ( !this.complete || this.width + this.height == 0 ) {
        var img = new Image; 
        img.src = this.src;
        $(img).load( function () {
          doStrips();
        });
      }
      else {
        doStrips();
      }

    });
  };
})( jQuery );




(function($){$.fn.picstrips=function(options){var settings=$.extend({'splits':2,'hgutter':'10px','vgutter':'60px','bgcolor':'#fff'},options);return this.each(function(){var that=this;function doStrips(){var h=$(that).height(),w=$(that).width(),sw=(w/settings.splits), clstyle="position: relative; float:left; margin-right: "+settings.hgutter+"; background-image: url('"+that.src+"'); width: "+sw+"px; height: "+h+"px;",spstyle="position: absolute; left: 0px; width: "+sw+"px; height: "+settings.vgutter+"; background-color: "+settings.bgcolor+"; top: ";var cnt=$("[id^=molbars_]").length+1;$('<div id="molbars_'+cnt+'"></div>').insertAfter($(that));for(var lp=0;lp<settings.splits;lp++){var voffs=lp%2!=0?'0px':(h-parseInt(settings.vgutter))+'px';clstyle+=" background-position: -"+(w-((settings.splits-lp)*sw))+"px 100%;";$('<div style="'+clstyle+'"><span style="'+spstyle+voffs+'"></span></div>').appendTo($('#molbars_'+cnt))};$(that).hide()}if(!this.complete||this.width+this.height==0){var img=new Image;img.src=this.src;$(img).load(function(){doStrips()})}else{doStrips()}})}})(jQuery);


</body>
</html>
              picstrips-1.0-min.js
(function($){$.fn.picstrips=function(options){var settings=$.extend({'splits':2,'hgutter':'10px','vgutter':'60px','bgcolor':'#fff'},options);return this.each(function(){var that=this;function doStrips(){var h=$(that).height(),w=$(that).width(),sw=(w/settings.splits), clstyle="position: relative; float:left; margin-right: "+settings.hgutter+"; background-image: url('"+that.src+"'); width: "+sw+"px; height: "+h+"px;",spstyle="position: absolute; left: 0px; width: "+sw+"px; height: "+settings.vgutter+"; background-color: "+settings.bgcolor+"; top: ";var cnt=$("[id^=molbars_]").length+1;$('<div id="molbars_'+cnt+'"></div>').insertAfter($(that));for(var lp=0;lp<settings.splits;lp++){var voffs=lp%2!=0?'0px':(h-parseInt(settings.vgutter))+'px';clstyle+=" background-position: -"+(w-((settings.splits-lp)*sw))+"px 100%;";$('<div style="'+clstyle+'"><span style="'+spstyle+voffs+'"></span></div>').appendTo($('#molbars_'+cnt))};$(that).hide()}if(!this.complete||this.width+this.height==0){var img=new Image;img.src=this.src;$(img).load(function(){doStrips()})}else{doStrips()}})}})(jQuery);
                                    picstrips-1.0.js
/*
picstrips by Steve Claridge (http://www.moreofless.co.uk)
*/
(function( $ ){

  $.fn.picstrips = function( options ) {  

    var settings = $.extend( {
      'splits': 2, 
      'hgutter': '0px', 
      'vgutter': '2px', 
      'bgcolor': '#fff'
    }, options );

    return this.each( function() {     

      var that = this;   

      function doStrips() {
        var h = $(that).height(),
            w = $(that).width(),
            sw = (w / settings.splits), //width of a strip
            clstyle = "position: relative; float:left; margin-right: " + settings.hgutter + "; background-image: url('" + that.src + "'); width: " + sw + "px; height: " + h + "px;",
            spstyle = "position: absolute; left: 0px; width: " + sw + "px; height: " + settings.vgutter + "; background-color: " + settings.bgcolor + "; top: ";

        var cnt = $("[id^=molbars_]").length + 1;

        $( '<div id="molbars_' + cnt + '"></div>' ).insertAfter( $(that) );

        for ( var lp = 0; lp < settings.splits; lp++ ) {
          var voffs = lp % 2 != 0 ? '0px' : (h - parseInt( settings.vgutter )) + 'px';
          clstyle += " background-position: -" + (w - ((settings.splits - lp) * sw)) + "px 100%;";
          $( '<div style="' + clstyle + '"><span style="' + spstyle + voffs + '"></span></div>' ).appendTo( $( '#molbars_' + cnt ) );  
        };
        $(that).hide();
      }

      //make sure image has finished loading
      if ( !this.complete || this.width + this.height == 0 ) {
        var img = new Image; 
        img.src = this.src;
        $(img).load( function () {
          doStrips();
        });
      }
      else {
        doStrips();
      }

    });
  };
})( jQuery );
  • 1 Contributor
  • 0 Replies
  • 152 Views
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.