We Keep Coding

I having trouble getting my caption to show up in my lightbox

I have a lightbox and i have it able to scroll from one image to another, but since adding the forward and back buttons i lost my caption that used to be there. If anyone could help me figure it out i would appreciate it.
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
//An image to overlay
$overlay.append($image);
var $leftArrow = $("<div id='leftArrow'></div>");
var $rightArrow = $("<div id='rightArrow'></div>");
var $closeLightbox = $("<div id='closeLightbox'></div><div style='clear:both'></div>");
$image.before($closeLightbox);
$image.before($leftArrow);
$image.after($rightArrow);
//A caption to overlay
$overlay.append($caption);
//Add overlay
$("body").append($overlay);
//Capture the click event on a link to an image
$("#boxCabinet a,#channelLetters a, #customSignage a, #postandpanel a").click(function(event){
event.preventDefault();
getCurrentImage(this);
//Show the overlay.
$overlay.show();
});
$leftArrow.click(function(){
getPrevImage();
});
$rightArrow.click(function(){
getNextImage();
});
function getCurrentImage (currentImage) {
thisImage = currentImage;
var imageLocation = $(currentImage).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);
//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
}
function getPrevImage() {
imageParent = $(thisImage).parent().prev();
if(imageParent.length!=0){
thisImage = $(imageParent).children("a");
}
getCurrentImage(thisImage);
}
function getNextImage() {
imageParent = $(thisImage).parent().next();
if(imageParent.length!=0){
thisImage = $(imageParent).children("a");
}
getCurrentImage(thisImage);
}
//When overlay is clicked
$closeLightbox.click(function(){
//Hide the overlay
$overlay.hide();
});
And heres my html
<div id="slideshow">
<a name="featured" id="featured"></a>
<h1>Featured Work</h1>
<div id="ssouter">
<% csv.each do |row|%>
<% if row[2] == "Active" && row[4] == "Featured" %>
<img class="slideshow" src=<%= row[0]%> >
<% end %>
</div>
</div>
<div id="portfolio">
<a name="boxCabinet"></a>
<h1>Box Cabinet </h1>
<ul id="boxCabinet">
<% csv.each do |row|%>
<% if row[3] == "Box" && row[2] == "Active" %>
<li><img src=<%= row[0]%> width="120" height="120"alt="<%=row[1]%>"></li>
<% end %>
<% end %>
</ul>

I fixed it my problem was here.
//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
}
I accidentally changed $(this).children when it should be $(currentImage).children
currentImage is when/where the caption is needing to be called so I see my error now.It came to me in my sleep, totally forgot til I started working on my code a few minutes ago.

All you'd have to do is to make title attribute of image links use image captions instead of link titles. It would require some modifications in your theme I guess, but the end result should be like that:
<img src="...">
Getting image captions for your attachments is quite well described: here

JQuery Image Gallery - Selected Images Temporarily Changes Layout

I'm trying to create a simple Ecommerce product gallery. Whenever the user clicks the thumbnail the images load correctly, but for a second the layout will shift positions because the image is swapping with the selected image. Would anybody know a way to clean up my code where this does not happen? I'm new to Jquery, so i'm probably not doing this the right way.
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
Here is a Demo

Don't hide #image instead the img inside it.
And i have added fadeOut instead of hiding to make it look more smooth. Then do fadeIn in the callback of fadeOut
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image img').fadeOut("slow", function(){
$('#image').html('<img src="' + image + '"/>');
$('#image').fadeIn('slow');
});
return false;
});
});

how add fade effects to jquery image swap

I find a jQuery image swap script and I use it this way:
Html:
<a href="#" class="product-catalog-thumb">
<img class="img-responsive" src="005.jpg" data-alt-src="005-2.jpg" >
<h2>Sterling Silver Pendants</h2>
</a>
js:
//Image Swap on hoover
var sourceSwap = function () {
var $this = $(this).find("img");
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
});
$(".product-catalog-thumb").hover(sourceSwap, sourceSwap);
and it works fine.
Can anyone help me to add fade effect to this code, I want to fade images into another in swap process.

jQuery custom Image gallery logic

I've tried to customise colorbox on this page so that the main image display launches colorbox, but clicking any of the thumbs just swaps the image into the main image display. This is working fine but one niggling issue is best to handle the indexing/numbering - as I don't want the same image to appear twice in the lightbox image group, and I also want the correct index of the image to show and for the sequence to correspond with the thumbnail sequence. If anyone could see how to improve what I have at the moment that would be great.
The JS I currently have is:
$j(document).ready(function(e) {
function initColorbox() {
$j(".product-gallery").colorbox({
rel : "product-gallery",
current : function() {
var currImg = $j(this).attr("href");
// Grab basename, as initial main image url can differ from corresponding thumb url
var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, '');
var pos;
var total = $j(".more-product-views li a").length;
// Check index by searching for filename in list items
$j(".more-product-views li a").each(function() {
if ($j(this).attr("href").indexOf(baseName) != -1) {
pos = $j(this).parent().index();
}
});
return "" + (pos + 1) + " of " + total;
},
onOpen : updateGallery,
onComplete : function() {
$j("#cboxTitle").hide();
}
});
}
function updateGallery() {
// Remove main product image's corresponding thumb from colorbox group to prevent duplication
var mainProdImg = $j(".main-prod-img").attr("href");
// Grab basename, as initial main image url can differ from corresponding thumb url
var mainProdBaseName = mainProdImg.replace(/^.*\/|\.[^.]*$/g, '');
$j(".more-product-views li a").each(function() {
if ($j(this).attr("href").indexOf(mainProdBaseName) != -1) {
$j(this).removeClass("product-gallery");
} else {
$j(this).addClass("product-gallery");
}
});
// Re-init gallery
initColorbox();
}
initColorbox();
updateGallery();
$j(".prod-more-view").click(function() {
var imgFull = $j(this).attr("href");
$j(".product-image a").attr("href", imgFull);
$j(".product-image img").attr("src", imgFull);
return false;
});
});

you can init the colorbox and use the .click of the ".product-gallery" like they do on the colorboxFAQ
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
to change the ".main-prod-img" when you click on the ".product-gallery" and only trigger the colorbox when click on ".main-prod-img" you need to check for event.originalEvent if it is not undefined then you return false
var $j = jQuery.noConflict();
$j(document).ready(function(e) {
//Create the colorbox
var $gallery = $j(".product-gallery").colorbox({
rel:"product-gallery",
onComplete : function() {
$j("#cboxTitle").hide();
}
});
//open colorbox on the right image
$j(".main-prod-img").click(function(e){
e.preventDefault();
var currImg = $j(this).attr("href");
var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, '');
var pos;
var total = $j(".more-product-views li a").length;
$j(".more-product-views li a").each(function() {
if ($j(this).attr("href").indexOf(baseName) != -1) {
pos = $j(this).parent().index();
}
});
$gallery.eq(pos).click();
});
//change .main-prod-img src if e.originalEvent is not undefined or open the color box
$gallery.click(function(e) {
var imgFull = $j(this).attr("href");
$j(".product-image a").attr("href", imgFull);
$j(".product-image img").attr("src", imgFull);
if(e.originalEvent){
return false;
}
});
});
on $j(".main-prod-img").click you need to search for the index of the image in list items and trigger the right ".product-gallery" click like this $gallery.eq(pos).click();
the HTML
<div class="wrapper">
<div class="product-img-box">
<p class="product-image product-image-zoom">
<img src="ohoopee3.jpg">
</p>
<div class="more-views">
<ul class="more-product-views">
<li>
<img src="ohoopee3.jpg" width="56" height="56">
</li>
<li>
<img src="ohoopee2.jpg" width="56" height="56">
</li>
<li>
<img src="ohoopee1.jpg" width="56" height="56">
</li>
<li>
<img src="marylou.jpg" width="56" height="56">
</li>
</ul>
</div>
</div>
</div>
http://jsfiddle.net/bq2fW/

Select link right after the one i just clicked

also threw it up on jsbin: http://jsbin.com/ohazo/2
but the code on jsbin is the old code, so overlay_nextimg is overlay_content.click in the javascript on jsbin
Jquery lightbox, grab next link from the one we just clicked, take it's href, fade out the current image, and load in the next img.
Also, how would i go about keeping the overlay_content centered? when changing images, have it animate to the new position? i was gonna tackle that next, but i'm here so why not.
Jquery and Html, i've changed the overlay_content.click that we were using before to overlay_nextimg, to be less confusing.
Jquery:
$(function (){
$('a.lightbox').click(function() {
var imghref = $(this).attr("href");
loadImage(imghref);
alert(imghref)
return false;
});
$('.overlay_nextimg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(nextlink);
loadImage(nextlink);
});
$('.overlay_previmg').click(function (){
var currlink = $("a[href='" + $(".overlay_content img").attr("src") + "']");
var nextlink = $(currlink).next(".lightbox");
var prevlink = $(currlink).prev(".lightbox");
alert(prevlink);
loadImage(prevlink);
});
function loadImage(href, prevlink, nextlink) {
var currentImg = $('.overlay_content img');
var img = new Image();
var docHeight = $(document).height();
$('.overlay_content').delay(300).fadeIn(400);
$(".overlay_bg").height(docHeight).fadeIn(400, function(){
$(img).load(function () {
$(img).hide();
$('.overlay_content').html(img);
$(img).fadeIn('slow');
}).error(function () {
$('.overlay_content').html("you SUCK at Javascript")
}).attr('src', href);
})
}
$('.overlay_bg').click(function (){
$(this).fadeOut(300);
$(".overlay_content").fadeOut(300, function(){
$(this).html('');
});
});
});
HTML:
<div class="overlay_bg"></div>
<div class="overlay_content"></div>
<h1>links</h1>
Load a water color image.
Load a library book, yeah.
from the interweb.
internet image.
HUGE

Please add more of the code/HTML - Is $("overlay_content").click(...) the function you need to fix?
You can use the eq() selector to get the n-th a.lightbox on the page. But obviously you'll need to track what link you're currently on., i.e.
$("a.lightbox:eq(1)")
Or - using the src of the image currently being displayed, find out which link was clicked and move next from there, i.e.
$("a.lightbox[href='" + currentImg.attr("src") + "']").next()