View Full Version : syntax error when pasting code

02-09-2018, 09:51 PM
The code in use is shown below.
I would like to add this extra code also below at line 220 but when i do i get a syntax error.
Can you advise why.

$rgGallery.find(‘div.rg-image’).fadeOut(500, function() { //Fade-Out

$rgGallery.find(‘div.rg-image’).empty( ).append(”) //Image change

}).fadeIn(500); //Fade-In

var $loader = $rgGallery.find('div.rg-loading').show();


var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');

$('<img/>').load( function() {

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );


if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );

anim = false;

}).attr( 'src', largesrc );

addItems = function( $new ) {

$items = $items.add( $($new) );
itemsCount = $items.length;
$esCarousel.elastislide( 'add', $new );


return {
init : init,
addItems : addItems



02-10-2018, 01:42 PM
The double quotes in this line aren't balanced:

$rgGallery.find(‘div.rg-image’).empty().append(”) //Image change

You could try either:

$rgGallery.find(‘div.rg-image’).empty().append("") //Image change


$rgGallery.find(‘div.rg-image’).empty().append() //Image change

02-10-2018, 02:48 PM
Actually, you can't use those type of quotes as delimiters in javascript at all. The kind of quotes you cannot use:

‘ and ’

These are the left leaning and right leaning single quote marks. You also cannot use the the left leaning and right leaning double quote marks. The only type of quotes used as delimiters in javascript are:

' and "

Those are the straight up and down single and the straight up and down double quote marks.

There could also be other problems.

Corrected code:

$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out

$rgGallery.find('div.rg-image').empty( ).append('') //Image change

}).fadeIn(500); //Fade-In

02-10-2018, 05:06 PM

I have entered your code which works as opposed to my incorrect code which didnt.

I then noticed that the main image would be hidden after the fade in/out etc and the thumbnails would return to top of screen.
I then added the following to the .rg-image style css min-height:600px;

This has now stopped the main image from being hidden by thumbs returning to top of screen but the main image is now just hidden after the fade in/fade out etc.

I click thumbnail,
Main image is shown.
Then main image is gone & now just an empty container.

Can you advise please


02-10-2018, 11:19 PM
I'm pretty sure that for I or anyone else here to help with that, we would need a link to the problem page, and perhaps even instructions as to exactly what to do in order to see the problem happen.

02-11-2018, 10:19 AM
Sorry about that,sometimes the obvious isnt obvious to me.
Here is the page in question http://www.theatticbanwell.co.uk/slideshow.html

Just click a thumbnail to see the issue with the main image that should be displayed.

If the code that i used is just wrong completely then the look im looking for is a fade in / fade out affect between each main image change.
Before you clicked a thumbnail & the main image was shown,this main image would stay shown until another thumbnail was clicked.

So the look now is to have some kind of transition between each main image change when thumbnail selection.

Many thanks.

02-11-2018, 04:33 PM
We may have to play around with this a bit, but I think I see the problem and this should fix it. Change:

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
$rgGallery.find('div.rg-image').empty( ).append('') //Image change
}).fadeIn(500); //Fade-In


$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>').fadeIn(500); //Image change and Fade-In

Note: Don't copy code from a message the forum sends you, it might be corrupt, instead log on and copy from the post.
The browser cache may have to be cleared and/or the page refreshed to see changes

02-11-2018, 04:59 PM
I have applied the new code as advised.
That issue seems to have been now sorted.

Adjusting the values on fade in / out doesnt make much difference that i can see, or is it me ?

I have cleared cache / cookies & you can see the affect here please.


Thanks very much if you could advise something a little more appealing etc.

02-11-2018, 06:27 PM
I have noticed the following also.

Say you select the second image in the thumbnails & it is now shown as the main image.
When you then select another thumbnail image i see just the new selected image fade in & fade out,same image twice.

I thought it would fade out the current main image & then fade in the new selected image,old then new images.


02-11-2018, 06:38 PM
I meant to also get rid of the highlighted line:

$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
$rgGallery.find('div.rg-image').fadeOut(500, function() { //Fade-Out
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>').fadeIn(500); //Image change and Fade-In

02-11-2018, 06:46 PM
Many thanks,
Ive now deleted it and fine.

I will play with speed etc.

On a side note do you have any advice for this please.

<li><img src="images/thumbs/188.jpg" data-large="images/fulls/188.jpg" data-description="Coffee table foot stool £90 H 40cm W 123cm D 43cm" /></a></li>

Currently shows as Coffee table foot stool £90 H 40cm W 123cm D 43cm

But i need it like so,

Coffee table foot stool £90
H 40cm W 123cm D 43cm

02-11-2018, 07:05 PM
If that's with the same page and script, you can just put the <br> right in there, but you have to change this in the script:

if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title )


if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().html( title )

But I'd caution against that. It looks fine to me the way it is, and having a br in there might throw the layout off.

02-11-2018, 07:27 PM
I changed it from .text to .html and then added the <br> but i then just see the <br> with the code without breaking.

The reason i required it on two lines was on mobiles etc the text would continue to the right then drop to a second line.
But depending on what the text was you would see something like this.

Coffee table foot stool £90H 40cm W 1
23cm D 43cm

Hence why i wanted to make a break after the £90 etc.

This would apply to all the items items.
Do you have anything up your sleeve which would add a break for just mobile etc,obviously pc is fine.

Doing it by width etc wont work as you then need to specify a fixed amount.
Where this might be perfect,

Coffee table £90
H W D etc etc

This wouldnt.
Lovely double pine wardrobe £125

Reason being character count etc
Hence why a break after the price.


02-11-2018, 07:31 PM
I'm looking at the script, it hasn't been changed. With the .text() you get the literal text. With .html() you get the html code as html.

02-11-2018, 07:38 PM
Its now working for me

02-11-2018, 07:43 PM
Chrome went asleep for a while

02-12-2018, 08:27 AM
Can you take a look & advise her please http://www.dynamicdrive.com/forums/showthread.php?81982-Select-active-thumb-with-border&p=323561#post323561

Thanks for your time.

02-12-2018, 10:33 PM
All sorted no thanks

02-13-2018, 01:36 AM
All sorted no thanks

Well, I do like to give other folks a chance to contribute. And, if I tried answering everything myself, I might go nuts. Glad you got your answer.

02-13-2018, 09:46 AM
Thanks for the follow up.