CODEWITHSUNDEEP
jqueryseocss-sprites
Kgn-web
Kgn-web

Reputation: 7555

How to create sprite of about 200 images?

I have a website, where I am in need to load about 200 images of same size 150*150.

I can't create different sprites having 20-30 images in one. As the image path are coming from database. It is appended using jQuery as below.

<ul id="albumsIcons">
</ul>

$('#btnGetAlbums').on('click',function(e)
{
   $.ajax(
   {
       url : "Controller/Action",
       type : "GET",
       success : function(data)
       {
            $.each(data,function(album)
            {
                $('#albumIcons').append('<li id='+album.Id+'>
                                          <img src='+album.imgPath+'/>album.Name </li>
            }
       }
   }
}

I have to load min 100 albums in one call.

So I thought of creating sprite, I have checked almost 5-6 links but they all take 20 images max for a sprite.

Any link that can create meet my requirement. or any alternate solution for my requirement.

Upvotes: 1

Views: 229

Answers (1)

Eddie
Eddie

Reputation: 119

I would do that with SmartSprites: its default purpose is to transform CSS files with single sprites (meaning: one single image file per sprite) into CSS files with only one image file (or actually as many as you like) for multiple sprites.

SmartSprites will turn something like this...:

/** sprite: mySprite; sprite-image: url('/mySprite.png'); sprite-layout: horizontal */

#albumIcons li
{
    width:150px;
    height:150px
}
#img1
{
    background-image:url(/images/1.png); /** sprite-ref: mySprite; */
}
#img2
{
    background-image:url(/images/2.png); /** sprite-ref: mySprite; */
}

... into this:

#albumIcons li
{
    width:150px;
    height:150px
}
#img1
{
    background-image: url('/mySprite.png');
    background-position: -0px top;
}
#img2
{
    background-image: url('/mySprite.png');
    background-position: -150px top;
}

But the main result is your new image file that is to be found (and re-used) in /mySprite.png.

Multiple mentions of the first line (the smart sprite definition) are possible, thus enabling you to generate more than one output file.

Upvotes: 1

Related Questions