I'm using qTip2 and with my Umbraco installation. I want my images inserted into my rich text editor to display the full size image on rollover.
The problem is, Umbraco's rich text editor displays images smaller than full size. To fit within the width of the rich text editor. So images display on the frontend have e.g. '_360x200.jpg' added instead of '.jpg'
How can I replace underscore and everything after it until the fullstop/period?
// Create the tooltips only on document load
$(document).ready(function() {
$('.rightUnevenCol img').each(function() {
// Grab fullsize image src
//Replace the underscore and everything after it before the '.' e.g. '_320x200.jpg' to '.jpg'
var bigSrc = $(this).attr('src').replace(/_\d+$/, "");
$(this).qtip({
content: '<img src="' + bigSrc + '" alt="" />',
// Set the height/width!!! This can cause positioning problems if not set
position: {
target: 'mouse',
adjust: {
mouse: true
}
},
show: {
target: false,
event: 'mouseenter',
effect: true,
delay: 90,
solo: false,
ready: false,
modal: false
},
hide: {
target: false,
event: 'mouseleave',
effect: false,
delay: 0,
fixed: true,
when: {
event: 'unfocus'
},
inactive: false
},
style: {
tip: false,
classes: 'preview'
},
events: {
render: null,
move: null,
show: null,
hide: null,
toggle: null,
focus: null,
blur: null
}
});
});
// since the qTip copies the content of the info div, you can remove it now
$('.rightUnevenCol img').remove('.preview');
});
Try
var bigSrc = $(this).attr('src').replace(/_[^\.]*/, "");
Or if you sure about format 123x456
var bigSrc = $(this).attr('src').replace(/_\d{1,3}x\d{1,3}/, "");