Tweet
Hi,
I have an gallery script which I am using with an image array.. I have created a div called dressinfo which pulls the longDescription of the file in the array to show as product info alongside an imagewrapper. When the thumbnail is clicked it indexs the files and gets the correct image info.
I have got some cursors that work on hover over the image wrapper. I need to be able to get the longDescription to change when the cursorLeft and cursorRight is clicked. I am very stuck and would appreciate any help with the javascript I need to add to my existing to get this to happen. The longDescription needs to be updated in dressinfo div.
Code below is my image array and also the code for pulling that info into dressinfo.. I just need help adding in the extra. so that on Click..
Someone passed me this : $("cursorRight").click (function () {
$(this).showDressInfo(images[index].longDescription);}); but it just seems wrong. but probably the right kind of thing.
I have it on a temp site at the mo at http://chicfreakz.co.uk/romanticabride2.html
Any help would be very much appreciated.
I have an gallery script which I am using with an image array.. I have created a div called dressinfo which pulls the longDescription of the file in the array to show as product info alongside an imagewrapper. When the thumbnail is clicked it indexs the files and gets the correct image info.
I have got some cursors that work on hover over the image wrapper. I need to be able to get the longDescription to change when the cursorLeft and cursorRight is clicked. I am very stuck and would appreciate any help with the javascript I need to add to my existing to get this to happen. The longDescription needs to be updated in dressinfo div.
Code below is my image array and also the code for pulling that info into dressinfo.. I just need help adding in the extra. so that on Click..
Someone passed me this : $("cursorRight").click (function () {
$(this).showDressInfo(images[index].longDescription);}); but it just seems wrong. but probably the right kind of thing.
Code:
$(function () {
var images = [{
src: 'cherish gallery/thumbs/tn_Akeira BETSEY COUTURE BRIDE.jpg',
srcBig: 'cherish gallery/images/Akeira BETSEY COUTURE BRIDE.jpg',
title: 'Akeira',
longDescription: '<b><h1>Akeira</h1></b><br><b>Betsey Couture<br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Charmaine Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'romanticabride/thumbs/tn_Charmaine.jpg',
srcBig: 'romanticabride/images/Charmaine.jpg',
title: 'Charmaine',
longDescription: '<b><h1>Charmaine</h1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Charmaine Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Connie.jpg',
srcBig: 'ronaldjoycebride/images/Connie.jpg',
title: 'Connie',
longDescription: '<b><h1>Connie</h1></b><br><b>Ronald Joyce<br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Connie Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'romanticabride/thumbs/tn_DELLA BY ROMANTICA.jpg',
srcBig: 'romanticabride/images/DELLA BY ROMANTICA.jpg',
title: 'Della',
longDescription: '<b><H1>Della</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Della Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Diamond.jpg',
srcBig: 'ronaldjoycebride/images/Diamond.jpg',
title: 'Diamond',
longDescription: '<b><h1>Diamond</h1></b><br><b>Ronald Joyce<br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Diamond Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Diamond 2.jpg',
srcBig: 'ronaldjoycebride/images/Diamond 2.jpg',
title: 'Diamond',
longDescription: '<b><h1>Diamond</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Diamond Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Diamond Back.jpg',
srcBig: 'ronaldjoycebride/images/Diamond Back.jpg',
title: 'Diamond',
longDescription: '<b><h1>Diamond</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Diamond Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Dominique.jpg',
srcBig: 'ronaldjoycebride/images/Dominique.jpg',
title: 'Dominique',
longDescription: '<b><h1>Dominique</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Dominique Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'romanticabride/thumbs/tn_Eleanor.jpg',
srcBig: 'romanticabride/images/Eleanor.jpg',
title: 'Eleanor',
longDescription: '<b><H1>Eleanor</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Eleanor Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'romanticabride/thumbs/tn_Glenda.jpg',
srcBig: 'romanticabride/images/Glenda.jpg',
title: 'Glenda',
longDescription: '<b><h1>Glenda</h1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Glenda Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'cherish gallery/thumbs/tn_harriet.jpg',
srcBig: 'cherish gallery/images/harriet.jpg',
title: 'Harriet',
longDescription: '<b><h1>Harriet</h1></b><br><b>Lace Up Back<br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Harriet Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'opulencebride/thumbs/tn_Holyhock.jpg',
srcBig: 'opulencebride/images/Holyhock.jpg',
title: 'Holyhock',
longDescription: '<b><H1>Holyhock</H1></b><br><b>Opulence<br><br><b><b><b><br><br><h2>Sizes Available:</h2><br> 6 - 30<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Opulence Holyhock Dress"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'romanticabride/thumbs/tn_Idaho.jpg',
srcBig: 'romanticabride/images/Idaho.jpg',
title: 'Idaho',
longDescription: '<b><h1>Idaho</h1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Romantica Idaho Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'opulencebride/thumbs/tn_Juniper.jpg',
srcBig: 'opulencebride/images/Juniper.jpg',
title: 'Juniper',
longDescription: '<b><H1>Juniper</H1></b><br><b>Opulence<br><br><b><b><b><br><br><h2>Sizes Available:</h2><br> 6 - 30<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Opulence Juniper Dress"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Ladonna.jpg',
srcBig: 'ronaldjoycebride/images/Ladonna.jpg',
title: 'Ladonna',
longDescription: '<b><h1>Ladonna</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Ladonna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Livia 2.jpg',
srcBig: 'ronaldjoycebride/images/Livia 2.bmp',
title: 'Livia',
longDescription: '<b><h1>Livia</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Livia Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Livia Back.jpg',
srcBig: 'ronaldjoycebride/images/Livia Back.jpg',
title: 'Livia',
longDescription: '<b><h1>Livia</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Livia Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Lola.jpg',
srcBig: 'ronaldjoycebride/images/Lola.bmp',
title: 'Lola',
longDescription: '<b><h1>Lola</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Lola Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Lola Zoom.jpg',
srcBig: 'ronaldjoycebride/images/Lola Zoom.bmp',
title: 'Lola',
longDescription: '<b><h1>Lola</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Lola Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'cherish gallery/thumbs/61006_0079_1_thumbnail.jpg',
srcBig: 'cherish gallery/images/61006_0079_1_preview.jpg',
title: 'Lola',
longDescription: '<b><h1>Lola</h1></b><br><b>Ronald Joyce <br><br><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Lola Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'ronaldjoycebride/thumbs/tn_Lydia.jpg',
srcBig: 'ronaldjoycebride/images/Lydia.bmp',
title: 'Lydia',
longDescription: '<b><h1>Lydia</h1></b><br><b>Ronald Joyce <br><br><h2>Sizes Available:</h2><br> 6 - 30.<b><br><b><br><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Ronald Joyce Lydia Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'cherish gallery/thumbs/Sienna_1_thumbnail.jpg',
srcBig: 'cherish gallery/images/Sienna_1.jpg',
title: 'Sienna_1',
longDescription: '<b>Sienna_1</b>'
}, {
src: 'cherish gallery/thumbs/Snowdrop_thumbnail.jpg',
srcBig: 'cherish gallery/images/Snowdrop_preview.jpg',
title: 'Snowdrop',
longDescription: '<b><h1>Snowdrop</h1></b><br><b>Opulence<br><br><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Opulence Snowdrop Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'opulencebride/thumbs/tn_WALLIS.jpg',
srcBig: 'opulencebride/images/WALLIS.jpg',
title: 'WALLIS',
longDescription: '<b><H1>WALLIS</H1></b><br><b>Opulence<br><br><b><b><b><br><br><h2>Sizes Available:</h2><br> 6 - 30<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Opulence WALLIS Dress"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}, {
src: 'cherish gallery/thumbs/Willow_thumbnail.jpg',
srcBig: 'cherish gallery/images/Willow_preview.jpg',
title: 'Snowdrop',
longDescription: '<b><h1>Willow</h1></b><br><b>Opulence<br><br><b><H2>Colours Available:</h2><b><br>IVORY/SILVER, WHITE SILVER<br>Please Enquire Below<br><br><br><br><a href="mailto:[email protected]?subject=Web Enquiry Regarding Opulence Willow Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
}];
var containerTarget = $('#thumbsContainer'),
$dressinfo = $('#dressinfo');
$.fn.showDressInfo = function () {
$dressinfo.html($(this).data('longdesc'));
}
var container = containerTarget.clone();
$.each(images, function (index, value) {
var image = $('<img />', {
src: value.src,
title: value.title,
alt: value.srcBig,
'data-longdesc': value.longDescription,
click: function () {
$(this).showDressInfo();
}
}).appendTo(container);
});
container.children('img').first().showDressInfo();
containerTarget.replaceWith(container);
});
Any help would be very much appreciated.