syntax error when pasting code

[theremotedr]

Hi,
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.
Thanks

$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();
				
				$items.removeClass('selected');
				$item.addClass('selected');
					 
				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 );
					
					$loader.hide();
					
					if( mode === 'carousel' ) {
						$esCarousel.elastislide( 'reload' );
						$esCarousel.elastislide( 'setCurrent', current );
					}
					
					anim	= false;
					
				}).attr( 'src', largesrc );
				
			},
			addItems		= function( $new ) {
			
				$esCarousel.find('ul').append($new);
				$items 		= $items.add( $($new) );
				itemsCount	= $items.length; 
				$esCarousel.elastislide( 'add', $new );
			
			};
		
		return { 
			init 		: init,
			addItems	: addItems
		};
	
	})();

	Gallery.init();

[styxlawyer]

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
.

or

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

[jscheuer1]

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

[theremotedr]

Hi,
jscheuer1

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.

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

Can you advise please

Thanks

[jscheuer1]

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.

[theremotedr]

Hi,
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.

[jscheuer1]

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

to:

					$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

[theremotedr]

Evening,
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.

http://www.theatticbanwell.co.uk/slideshow.html

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

[theremotedr]

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.

Thanks

[jscheuer1]

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
                    });