Hello everyone, let me first say that js is not my area of expertise, so bare with me. I have a site that was originally developed by someone who is no longer reachable. I have all of the files and am developing locally.
The original idea was to have a thumbnail gallery that "zoomed in" once each thumbnail was clicked. However, I want to do away with the thumbnails (image 1) and just use the large image gallery (image 2.) I like the overall functionality of this gallery, and would love to keep using it, without the thumbnails.
Image 1:
http://cooltablemedia.com/clients/sbpc/thumbnails.png
Image 2:
http://cooltablemedia.com/clients/sbpc/large.png
HTML CODE:
http://cooltablemedia.com/clients/sbpc/htmlcode
Below is the javascript code that I currently have. Thanks in advance, any help is greatly appreciated!
$(function () {
var fadeSpeed = 220;
var total = $(".tn a").length;
$('#prev').hover(function () {
$("#prev_image").animate({ opacity: 1.0 }, fadeSpeed);
},function () {
$("#prev_image").animate({ opacity: 0.01 }, fadeSpeed);
});
$('#next').hover(function () {
$("#next_image").animate({ opacity: 1.0 }, fadeSpeed);
},function () {
$("#next_image").animate({ opacity: 0.01 }, fadeSpeed);
});
$('.tn a').click(function(e){
e.preventDefault();
if($(this).hasClass('selected')) { return false; }
$('.tn a.selected').removeClass('selected');
$(this).addClass('selected');
var cnt = $(this).next().val()
var imageId = "#photo" + cnt;
updateLocation(cnt);
//update counter
$("#tn_counter").html(cnt);
var selected_image = $(imageId);
$('.holder').remove(imageId);
var $holder_selected = $('.holder img.selected');
$(selected_image).insertBefore($holder_selected);
$(selected_image).fadeTo(0,1.0);
$(selected_image).show();
$holder_selected.removeClass('selected');
$(selected_image).addClass("selected");
if( $('.tn').is(':visible') ) {
var fadeDelay = 0.1;
} else {
var fadeDelay = 300;
}
$holder_selected.fadeTo(fadeDelay,0,function(){
// $("#fadeContainer").children().last().remove();
$holder_selected.hide();
});
//$("#fadeContainer").children().last().remove();
//set description
var imageDescription = $(this).next().next().val();
$("#photo_info_btn").html("" + imageDescription + "");
if( $('.tn').is(':visible') ) {
$(".tn").fadeOut("fast");
}
return false;
});
$('#next').click(function(){
//next click
var selected_index = $('.tn a.selected').next().val();
selected_index++;
if(selected_index > total) { selected_index = 1; }
var tnId = "#photo_tn" + selected_index;
$(tnId).click();
});
$('#prev').click(function(){
//prev click
var selected_index = $('.tn a.selected').next().val();
selected_index--;
if(selected_index <= 0) { selected_index = total; }
var tnId = "#photo_tn" + selected_index;
$(tnId).click();
});
$("#photo_info_prev").click(function(e){
e.preventDefault();
$('#prev').click();
});
$("#photo_info_next").click(function(e){
e.preventDefault();
$('#next').click();
});
//--Select first image
// $("#photo1").addClass("selected");
// $("#.tn a").first().addClass("selected");
//--Initialize states
$('#prev_image').animate({ opacity: 0.01 }, 1);
$('#next_image').animate({ opacity: 0.01 }, 1);
$('.holder img').not('img.selected').hide();
var hash = gethash();
if(hash) {
if(hash <= total && hash > 0){
var tnId = "#photo_tn" + hash;
$(tnId).click();
} else {
alert("no");
}
}
});
function updateLocation(type){
window.location = window.location.pathname + "#" + type;
}
function gethash(){
var hash=window.location.hash;
hash=hash.replace(/#/,'');
//if(hash == settings.currenthash) return;
return hash;
}
