You might want to set a height to the "picHolder" div to reserve the space to avoid jitter on the page when it removes the original picture and takes some time to load the new one. 300px seems to do it.function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast", function(){
$("#maxImage").remove();
var image = new Image();
$(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
$(image).hide();
$("#picHolder").append(image);
$(image).fadeIn("fast");
});
});
$("#maxTitle").html(title);
$("#maxDescr").html(descr);
}
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast", function(){
var image = new Image();
$(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
$(image).hide();
$("#maxImage").attr({
src: url,
width: width,
height: height
});
$("#maxImage").fadeIn("fast");
$("#maxTitle").html(title);
$("#maxDescr").html(descr);
});
});
}
<script>
jQuery.noConflict();
</script>
function showPic(url,title,descr,width,height) {
jQuery("#maxImage").fadeOut("fast", function(){
var image = new Image();
jQuery(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
jQuery(image).hide();
jQuery("#maxImage").attr({
src: url,
width: width,
height: height
});
jQuery("#maxImage").fadeIn("fast");
jQuery("#maxTitle").html(title);
jQuery("#maxDescr").html(descr);
});
});
}
The description and titles are not changing/showing because at least in the demo page you showed me didn’t have those maxTitle and maxDescr elements in the source at all..
Eg. you need to add these somewhere where you want the title / description to show up:
<p id="maxTitle"></p>
<p id="maxDescr"></p>
Please write a tutorial for this in the MaxiGallery wiki page once you have it working.. The tutorial doesn’t have to be much initially, community can correct it later, but it would be good to have at least your snippet calls and chunk contents etc there.. It would help me a lot when I could just refer to that tutorial when people are asking for the same thing..
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast", function(){
var image = new Image();
$(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
$(image).hide();
$("#maxImage").attr({
src: url,
width: width,
height: height,
alt: title
});
$("#maxImage").fadeIn("fast");
});
});
}
Oh that.. You can do it in the js function just fine, use this:
Note that I removed the title and description lines at the bottom of the function if you are not using the html elements at all. I added the updating of the alt parameter and set it to the picture title variable. The picture description is not used anywhere now, should it be like that?
function showPic(url,title,descr,width,height) { $("#maxImage").fadeOut("fast", function(){ var image = new Image(); $(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() { $(image).hide(); $("#maxImage").attr({ src: url, width: width, height: height, alt: title }); $("#maxImage").fadeIn("fast"); }); }); }
<a id="maxTitle" href="[+maxigallery.picture.title:htmlent+]" rel="shadowbox"></a>
<script type="text/javascript">
//<![CDATA[
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast", function(){
var image = new Image();
$(image).attr({src: url, width: width, height: height, href: title, id: 'maxImage'}).load(function() {
$(image).hide();
$("#maxImage").attr({
src: url,
width: width,
height: height
});
$("#maxTitle").attr({
href: title
});
$("#maxImage").fadeIn("fast");
});
});
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("fast", function(){
var image = new Image();
$(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
$(image).hide();
$("#maxImage").attr({
src: url,
width: width,
height: height,
alt: title
});
$("#maxImage").fadeIn("fast");
$("#maxTitle").attr({
href: title
});
});
});
}
//]]>
</script>