I want to add a background image to a div in webp format with fallback to jpg.
If it is img tag, we can call it as:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>
And what can we do in case of <div class="carousel-item active" style="background-image: url('images/image.jpeg')">
Thank you for any help!
Here is a my solution...
You load the image with a hidden picture element and fetch with js the loaded image (with fallback to jpg or png). Finally you set the loaded image with jquery as the background of the parent div.
Maybe there is a better solution in the field.
function makeBgImage( img ){
let srcImage;
if ( typeof img.currentSrc === "undefined" ){
//Old browser
srcImage = img.src;
}else{
//Modern browser
srcImage = img.currentSrc;
}
let ref = $(img).parents('div:first');
ref.css('background', 'url(' + srcImage + ')');
if( ref.hasClass('contain') ){
ref.css('background-size', 'contain');
}else{
ref.css('background-size', 'cover');
}
ref.css('background-position', 'center');
ref.css('background-repeat', 'no-repeat');
}
.hidden{display: none;}
.img-container{
width: 100%;
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
<picture class="hidden">
<source srcset="image.webp" type="image/webp">
<img onload="makeBgImage(this)" alt="Image" src="image.png">
</picture>
</div>
Related
I have used the SpriteSheetBuilder in Easel.js to create sprite sheets on the fly. The issue I am having is that I am only able to draw about 5 or 6 instances of the sprite to the canvas before the browser locks up. It is causing significant cpu and memory issues. I am having trouble pinpointing why this is happening. It must be my implementation. My sprite sheet is comprised of about 100 frames but he images I am using are only 8kbs each.
What I am making is a conga line animation. I will be making a call to the server to get the faces that will be composited on the dancer sprites with the sprite builder. Any insight into this issue is great appreciated! Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS Example: SpriteSheetBuilder</title>
<script src="easeljs-0.8.2.min.js"></script>
<style>
#dancers img {
display: none;
}
canvas {
background: red;
width: 100%;
}
button {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="dancers">
<img id="stage" src="stage.jpg">
<img id="curtains" src="curtains.png">
<img id="conga_1" src="conga_1.png">
<img id="conga_2" src="conga_2.png">
<img id="conga_3" src="conga_3.png">
<img id="conga_4" src="conga_4.png">
<img id="conga_5" src="conga_5.png">
<img id="conga_6" src="conga_6.png">
<img id="conga_7" src="conga_7.png">
<img id="conga_8" src="conga_8.png">
<img id="conga_9" src="conga_9.png">
<img id="conga_10" src="conga_10.png">
<img id="conga_11" src="conga_11.png">
<img id="conga_12" src="conga_12.png">
<img id="conga_13" src="conga_13.png">
<img id="conga_14" src="conga_14.png">
<img id="conga_15" src="conga_15.png">
<img id="conga_16" src="conga_16.png">
<img id="conga_17" src="conga_17.png">
<img id="conga_18" src="conga_18.png">
<img id="conga_19" src="conga_19.png">
<img id="conga_20" src="conga_20.png">
<img id="conga_21" src="conga_21.png">
<img id="conga_22" src="conga_22.png">
<img id="conga_23" src="conga_23.png">
<img id="conga_24" src="conga_24.png">
<img id="conga_25" src="conga_25.png">
<img id="conga_26" src="conga_26.png">
<img id="conga_27" src="conga_27.png">
<img id="conga_28" src="conga_28.png">
<img id="conga_29" src="conga_29.png">
<img id="conga_30" src="conga_30.png">
<img id="conga_31" src="conga_31.png">
<img id="conga_32" src="conga_32.png">
<img id="conga_33" src="conga_33.png">
<img id="conga_34" src="conga_34.png">
<img id="conga_35" src="conga_35.png">
<img id="conga_36" src="conga_36.png">
<img id="conga_37" src="conga_37.png">
<img id="conga_38" src="conga_38.png">
<img id="conga_39" src="conga_39.png">
<img id="conga_40" src="conga_40.png">
<img id="conga_41" src="conga_41.png">
<img id="conga_42" src="conga_42.png">
<img id="conga_43" src="conga_43.png">
<img id="conga_44" src="conga_44.png">
<img id="conga_45" src="conga_45.png">
<img id="conga_46" src="conga_46.png">
<img id="conga_47" src="conga_47.png">
<img id="conga_48" src="conga_48.png">
<img id="conga_49" src="conga_49.png">
<img id="conga_50" src="conga_50.png">
<img id="conga_51" src="conga_51.png">
<img id="conga_52" src="conga_52.png">
<img id="conga_53" src="conga_53.png">
<img id="conga_54" src="conga_54.png">
<img id="conga_55" src="conga_55.png">
<img id="conga_56" src="conga_56.png">
<img id="conga_57" src="conga_57.png">
<img id="conga_58" src="conga_58.png">
<img id="conga_59" src="conga_59.png">
<img id="conga_60" src="conga_60.png">
<img id="conga_61" src="conga_61.png">
<img id="conga_62" src="conga_62.png">
<img id="conga_63" src="conga_63.png">
<img id="conga_64" src="conga_64.png">
<img id="conga_65" src="conga_65.png">
<img id="conga_66" src="conga_66.png">
<img id="conga_67" src="conga_67.png">
<img id="conga_68" src="conga_68.png">
<img id="conga_69" src="conga_69.png">
<img id="conga_70" src="conga_70.png">
<img id="conga_71" src="conga_71.png">
<img id="conga_72" src="conga_72.png">
<img id="conga_73" src="conga_73.png">
<img id="conga_74" src="conga_74.png">
<img id="conga_75" src="conga_75.png">
<img id="conga_76" src="conga_76.png">
<img id="conga_77" src="conga_77.png">
<img id="conga_78" src="conga_78.png">
<img id="conga_79" src="conga_79.png">
<img id="conga_80" src="conga_80.png">
<img id="conga_81" src="conga_81.png">
<img id="conga_82" src="conga_82.png">
<img id="conga_83" src="conga_83.png">
<img id="conga_84" src="conga_84.png">
<img id="conga_85" src="conga_85.png">
<img id="conga_86" src="conga_86.png">
<img id="conga_87" src="conga_87.png">
<img id="conga_88" src="conga_88.png">
<img id="conga_89" src="conga_89.png">
<img id="conga_90" src="conga_90.png">
<img id="conga_91" src="conga_91.png">
<img id="conga_92" src="conga_92.png">
<img id="conga_93" src="conga_93.png">
<img id="conga_94" src="conga_94.png">
<img id="conga_95" src="conga_95.png">
<img id="conga_96" src="conga_96.png">
<img id="conga_97" src="conga_97.png">
<img id="conga_98" src="conga_98.png">
<img id="conga_99" src="conga_99.png">
<img id="conga_100" src="conga_100.png">
<img id="conga_101" src="conga_101.png">
<img id="conga_102" src="conga_102.png">
<img id="conga_103" src="conga_103.png">
<img id="conga_104" src="conga_104.png">
<img id="conga_105" src="conga_105.png">
<img id="conga_106" src="conga_106.png">
<img id="conga_107" src="conga_107.png">
<img id="conga_108" src="conga_108.png">
</div>
<div>
<canvas id="testCanvas" width="1920" height="1080"></canvas>
</div>
<button id="add_dancer" onclick="addDancer();">add dancer</button>
<script src="jjcoords.js"></script>
<script id="editable">
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
var containers = [];
var congaDancers = [];
var counter = 0;
function init() {
var stageImg = new createjs.Bitmap(document.getElementById('stage').src);
stage.addChild(stageImg);
buildSprite();
var curtains = new createjs.Bitmap(document.getElementById('curtains').src);
stage.addChild(curtains);
createjs.Ticker.addEventListener("tick", tick);
}
function buildSprite() {
var container = createFrame('ryan3.png', document.getElementById(coords[counter].id).src, coords[counter].x, coords[counter].y, coords[counter].scale, coords[counter].rotation);
containers.push(container);
}
function createFrame(consumerImg, dancerFrame, x, y, scale, rot) {
var bitmap;
var container = new createjs.Container();
var consumerFace = new Image();
consumerFace.src = consumerImg;
consumerFace.onload = function () {
var dancer = new createjs.Bitmap(dancerFrame);
dancer.scaleX = 1.5;
dancer.scaleY = 1.5;
dancer.regX = dancer.image.width / 2 | 0;
dancer.regY = dancer.image.height / 2 | 0;
dancer.x = 100;
dancer.y = 100;
bitmap = new createjs.Bitmap(consumerFace.src);
bitmap.regX = bitmap.image.width / 2 | 0;
bitmap.regY = bitmap.image.height / 2 | 0;
bitmap.scaleX = scale;
bitmap.scaleY = scale;
bitmap.x = x;
bitmap.y = y;
bitmap.rotation = rot;
// bitmap.alpha = .5;
container.name = 'ryan' + counter;
container.addChild(dancer, bitmap);
container.x = 700;
container.y = 250;
counter++;
if (counter < coords.length) {
buildSprite();
} else {
spriteBuilder();
}
};
return container;
}
function spriteBuilder() {
var square = new createjs.Container();
// stage.addChild(containers[107]);
// containers[107].y = 500;
// create the sprite sheet builder:
var builder = new createjs.SpriteSheetBuilder();
var frames = [];
for (var j = 0; j < containers.length; j++) {
index = builder.addFrame(containers[j], null, 1, function (target, data) {
}, j);
// save off the index of each frame in order to use when defining the animation:
frames.push(index);
}
// create an animation named square that comprises all of the frames we just added:
// we're also telling it to loop the animation and setting a frequency so it updates every 8 ticks:
builder.addAnimation("square", frames, true, 1);
// run the build operation, and grab the resulting sprite sheet:
// we could also do this asynchronously with buildAsync(...)
var spriteSheet = builder.build();
var square2 = new createjs.Sprite(spriteSheet, "square");
square2.scaleX = .6;
square2.scaleY = .6;
square2.x = 250;
square2.y = 620;
stage.addChild(square2);
// add in the generated spritesheet image for demo purposes:
// stage.addChild(new createjs.Bitmap(spriteSheet._images[0])).set({x: 75, y: 150});
// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addEventListener("tick", stage);
congaDancers.push(square2);
console.log(congaDancers);
}
var xpos = 200;
function addDancer() {
counter = 0;
containers = [];
buildSprite();
xpos = xpos + 200;
congaDancers[congaDancers.length - 1].x = xpos;
}
function tick() {
stage.update(event);
}
init();
</script>
</body>
</html>
This is actually pretty simple. By caching 100+ images for each dancer, you are generating a TON of images/canvases in memory. This is 75,000,000 pixels for each dancer.
SpriteSheets are a good way to cache content that is complex. However, drawing and swapping this many large textures may have a detrimental effect, instead of offering any benefits.
There are lots of better ways to do this.
If you really want to use SpriteSheets, then make one, and add the custom face over top. So create a container that has the dancer body, and a face sprite/bitmap. You can make as many of these as you like, and not generate a new set of giant images for each one.
Rather than make a new SpriteSheet using SpriteSheetBuilder, just generate a definition that uses all your images you are already creating. The SpriteSheet supports multiple images, so you should be able to point each frame to a new image. Then take the same approach as earlier
Where did this art come from? If you are animating using body part images, consider doing that in EaselJS instead of saving bitmaps. A bunch of small body parts reused will be way more performant.
If you started with Vectors, consider using Adobe Animate to export them. This will generate you scalable vector content that you can use instead. Granted, a whole ton of vectors on canvas is not ideal, but it will not be taxing your memory the way you are now.
I would also consider preloading the images to create a better experience.
Hope this helps!
I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.
My Simple HTML Structure:
<html>
<body>
<p id="5">
My Text Qoted Here -
<span class="author">Author </span>
<br>
<span class="uptext">20</span>
<img class="im" class="upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
<img class="im" class="downimg"
src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
<span class="downtext">5</span>
</p>
</body>
</html>
as can be seen there are two images, and i want to change the count of the image based on which image is clicked.
i write the following jquery code for it:
$(function() {
$(".upimg").click(function(e) {
e.preventDefault();
alert("here1");
curr_val = $(this).closest(".uptext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".uptext").text(nos);
});
$(".downimg").click(function(e) {
e.preventDefault();
alert("here2");
curr_val = $(this).closest(".downtext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".downtext").text(nos);
});
});
But it does not seem to respond.
You can find the fiddle here
Your <img> tags have two class attributes:
<img class="im" class="upimg"
Try changing that to
<img class="im upimg"
Also, the closest() method returns the closest parent element, not an adjacent sibling, so to find the correct uptext element, you need to use:
$(this).prev().text()
you cant use 2 class attribute
you have to do like that
<img class="im upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">
I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
Thanks for your help!!
A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
I had similar problem with your...
I've got important tips from that site, please check it...
http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache
Old but good js plugin.
I have solved this problem with jQuery, changing the jqimg attribute on the picture source:
$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");
On the following :
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">
Finally obtaining:
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">
You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.
This is how you can clean the data from jqzoom:
$('.jqclass').removeData('jqzoom');
Because jqzoom keeps the data in this object:
$(el).data("jqzoom", obj);
Removing the main image and re-appending it should make it work, here is an example
$('a.main_thumb').jqzoom({ title: false });
$("a.thumb").click(function (e) {
e.preventDefault();
var thumbUrl = $(this).attr("href");
var thumbImg = $(this).find("img").attr("data-img");
$(".main_thumb").remove();
$(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");
$('a.main_thumb').jqzoom({ title: false });
});
With the last version of jQZoom you can create galleries (jQZoom can manage it for you).
1.Attach the gallery ID to your main anchor "rel" attribute.
<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
<img src="images/small-1.jpg" />
</a>
2.Manage your thumbnails "class" and "rel" attributes.
The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
<ul>
<li>
<a class="zoomThumbActive" href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-1.jpg',
largeimage: 'images/big-1.jpg'
}">
<img src="images/thumbnail-1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-2.jpg',
largeimage: 'images/big-2.jpg'
}">
<img src="images/thumbnail-2.jpg">
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
The structure of the thumbnail rel attribute is very important.
The base elements are :
gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.