Lightbox 2.6 - Desire that -Click on thumbnail results in jumping to position on page

**Mark Ellis** · 02-04-2014, 12:24 AM

Web page www.dorsetdog.com/lightbox-2-6-trial-in-google-sites

I use Google sites - because the web hosting is free and I do this to help charity fund raising dog shows.

In Google sites, one can only enter html code into the Body of the page. One can't upload html files, so one creates an XML file, uploads that file to the drive and creates a "gadget" to load and display the xml file on the relevant page - it shows as an iframe when one views the entire page in html.

I use Lightbox - in a gadget, and generally it works very well. Problem is that if someone clicks on an image, Lightbox will display that image at the top of the gadget - but if the visitor clicked on an image at the bottom of the gallery, all they see is a black screen.

But I want it so that when someone clicks on any image in the gallery, that the screen jumps to the start of the gadget. It is possible to put a: links into the html within the body, such as <a name=”swmgsik”></a> to jump to.

My problem is, do I need the js file to jump the visitor to the top of the gadget, or do I use the href within the xml file to get the screen to jump up to the start?

Please bear in mind that moving the lightbox html outside of the ifram gadget is not an option

So I also wondered if there is a "Screen" possibility

The three JS files are

jquery-1.10.2.js lightbox-2.6.js modernizr.custom.js

And the html for a normal html file is

HTML Code:

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="utf-8">

	<title>Lightbox 2</title>

	<meta name="description" lang="en" content="Lightbox 2 is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
	<meta name="author" content="Lokesh Dhakar">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<script src="js/modernizr.custom.js"></script>



	<link rel="stylesheet" href="css/lightbox-2-6.css" media="screen"/>
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/lightbox-2.6.js"></script>
	
</head>
<body>
<p> some text</p>
br
<p> some text</p>
br

<p> some text</p>
br
<p> some text</p>
br
<a name=”display”></a>
<div class="wrapper" onClick="window('file:///D:/ME/a-googledog/Lightbox-js/2.6/index.html#display');">

		<div class="image-row">
			<div class="image-set">
			<p>Trial page for Lightbox 2.6 in Google Sites </p>
			<p>Cick on an image to see a larger version </p>
			<a name=”display”></a>
<a class="big-picture" href="https://lh3.googleusercontent.com/--cxNVkaFfGo/UlP0PeByODI/AAAAAAAABu0/w0fn8KC7imY/s512/l-1-A-V-Puppy-Daisy-owned-by-Zoe-Haime.jpg" rel="lightbox[Corscombe-2013]" title="Cl 1 A.V. Puppy and Best Puppy In Show Corscombe 2013 - Daisy, owned by Zoe Haime"><img class="thumbnail" src="https://lh6.googleusercontent.com/-3GqvRMNQZaA/UlPzoKVW44I/AAAAAAAABoI/1WnupRfYAUE/s300/1-A-V-Puppy-Daisy-owned-by-Zoe-Haime.jpg" ></a>

<a class="big-picture" href="https://lh6.googleusercontent.com/-S9iXy-U7yqQ/UlP0SsDgx6I/AAAAAAAABu0/bXtGf8WcDrc/s512/l-2-A-V-Sporting-and-Best-In-Show-Ruby-owned-by-Zoe-Haime.jpg" rel="lightbox[Corscombe-2013]" title="Cl 2 A.V. Sporting and Best In Show Corscombe 2013 – Ruby, owned by Zoe Haime"><img class="thumbnail" src="https://lh4.googleusercontent.com/-qOHY4-v8U4k/UlPzqw_pBLI/AAAAAAAABpU/IbYoQVOpIxI/s300/2-A-V-Sporting-and-Best-In-Show-Ruby-owned-by-Zoe-Haime.jpg" ></a>

<a class="big-picture" href="https://lh6.googleusercontent.com/-AKsZpw1kNLA/UlP0TLR6NcI/AAAAAAAABu0/2lp72bOqD4s/s512/l-3-A-V-Non-sporting-Josh-owned-by-Loretta-Clifford.jpg" rel="lightbox[Corscombe-2013]" title="Cl 3 A.V. Non sporting - Josh, owned by Loretta Clifford"><img class="thumbnail" src="https://lh3.googleusercontent.com/-HUukaqzZaj0/UlPzriJ5iBI/AAAAAAAABpc/HzST4uykmDQ/s300/3-A-V-Non-sporting-Josh-owned-by-Loretta-Clifford.jpg" ></a>

<a class="big-picture" href="https://lh4.googleusercontent.com/-2v2WGYIBzjc/UlP0TfqzD0I/AAAAAAAABu0/qNA5GxphcwQ/s512/l-4-A-V-Open-and-RBIS-Lottie-owned-by-Karen-and-Gary-Plummer.jpg" rel="lightbox[Corscombe-2013]" title="Cl 4 A.V. Open and Reserve Best In Show – Lottie, owned by Karen and Gary Plummer"><img class="thumbnail" src="https://lh4.googleusercontent.com/-Vz4iSh_8rPs/UlPzrho-YYI/AAAAAAAABpk/CkIZKeRJYmg/s300/4-A-V-Open-and-RBIS-Lottie-owned-by-Karen-and-Gary-Plummer.jpg" ></a>

<a class="big-picture" href="https://lh5.googleusercontent.com/-30d6jUU88ZA/UlP0TsrjJCI/AAAAAAAABu0/RWf7jz0-Qe4/s512/l-5-A-V-Veteran--Olivia-owned-by-Karen-and-Gary-Plummer.jpg" rel="lightbox[Corscombe-2013]" title="Cl 5 A.V. Veteran, Olivia, owned by Karen and Gary Plummer "><img class="thumbnail" src="https://lh6.googleusercontent.com/-Ta5i86jRDbA/UlPzsSLVtHI/AAAAAAAABpo/XrZxuVPD2Z0/s300/5-A-V-Veteran--Olivia-owned-by-Karen-and-Gary-Plummer.jpg" ></a>

<a class="big-picture" href="https://lh3.googleusercontent.com/-v_fK3CsNYy8/UlPPLxiEcSI/AAAAAAAABls/njqeX2YCAzw/s640/l-Best-Pedigree-In-Show-trophy-winners.jpg" rel="lightbox[Corscombe-2013]" title="Best In Show 2013 - Ruby, owned by Zoe Haime. Reserve Best In Show – Lottie, owned by Karen and Gary Plummer. Best Veteran - Olivia, owned by Karen and Gary Plummer. Best Puppy in Show – Daisy, owned by Zoe Haime."><img class="thumbnail"  src="https://lh3.googleusercontent.com/-8GCeVw90Syk/UlPOq2Hg6QI/AAAAAAAABi8/8EnGDkFti1A/s447/Best-Pedigree-In-Show-trophy-winners.jpg" ></a>

				<a class="big-picture" href="https://lh4.googleusercontent.com/-6z2ycj0RxG0/UmMg2ufqbTI/AAAAAAAAGVA/TO_Si0HNOyc/s640/1.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh4.googleusercontent.com/-6z2ycj0RxG0/UmMg2ufqbTI/AAAAAAAAGVA/TO_Si0HNOyc/s640/1.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
				
				<a class="big-picture" href="https://lh3.googleusercontent.com/-Hw3XoYw_OmQ/UmMg6pwhteI/AAAAAAAAGWI/f2INklK-VIs/s800/2.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh3.googleusercontent.com/-Hw3XoYw_OmQ/UmMg6pwhteI/AAAAAAAAGWI/f2INklK-VIs/s800/2.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="55"/></a>
				
				<a class="big-picture" href="https://lh3.googleusercontent.com/-WCrmOhalshg/UmMg_e8y7ZI/AAAAAAAAGXY/iv3tgZCejqE/s640/3.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh3.googleusercontent.com/-WCrmOhalshg/UmMg_e8y7ZI/AAAAAAAAGXY/iv3tgZCejqE/s640/3.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
				
				<a class="big-picture" href="https://lh5.googleusercontent.com/-SjG2_MoqlW8/UmMhAEEZ7jI/AAAAAAAAGXk/d5LNsE1WCbo/s640/4.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh5.googleusercontent.com/-SjG2_MoqlW8/UmMhAEEZ7jI/AAAAAAAAGXk/d5LNsE1WCbo/s640/4.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
				
				<a class="big-picture" href="https://lh4.googleusercontent.com/-6z2ycj0RxG0/UmMg2ufqbTI/AAAAAAAAGVA/TO_Si0HNOyc/s640/1.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh4.googleusercontent.com/-6z2ycj0RxG0/UmMg2ufqbTI/AAAAAAAAGVA/TO_Si0HNOyc/s640/1.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
				
				<a class="big-picture" href="https://lh3.googleusercontent.com/-Hw3XoYw_OmQ/UmMg6pwhteI/AAAAAAAAGWI/f2INklK-VIs/s800/2.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh3.googleusercontent.com/-Hw3XoYw_OmQ/UmMg6pwhteI/AAAAAAAAGWI/f2INklK-VIs/s800/2.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="55"/></a>
				
				<a class="big-picture" href="https://lh3.googleusercontent.com/-WCrmOhalshg/UmMg_e8y7ZI/AAAAAAAAGXY/iv3tgZCejqE/s640/3.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh3.googleusercontent.com/-WCrmOhalshg/UmMg_e8y7ZI/AAAAAAAAGXY/iv3tgZCejqE/s640/3.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
				
				<a class="big-picture" href="https://lh5.googleusercontent.com/-SjG2_MoqlW8/UmMhAEEZ7jI/AAAAAAAAGXk/d5LNsE1WCbo/s640/4.jpg" data-lightbox="example-set" title="Halstock Hall."><img class="thumbnail" src="https://lh5.googleusercontent.com/-SjG2_MoqlW8/UmMhAEEZ7jI/AAAAAAAAGXk/d5LNsE1WCbo/s640/4.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
			</div>
		</div>
	</section>

</div>

</body>
</html>

Many thanks for any suggestions offered

Mark

**Mark Ellis** · 02-04-2014, 09:06 AM

I suppose one option is to get Lightbox to display on the relevant page - as in - so that Lightbox jumps outside of the xml iframe. That way Lightbox would fill the screen and display the large photo in the middle of the screen, instead of just displaying it inside of the iframe gadget.

Screenshot attached. I've zoomed the page out to show how the Lightbox displays inside the iframe gadget. But ideally need Lightbox to create and display lightbox on the whole page.

Does that make sense

Click image for larger version.

Name: lightbox-display.jpg
Views: 256
Size: 74.4 KB
ID: 5341

As an explanatory note
Google does not allow access to the head area of pages for internet security reasons. The iframe gadget is a way for Google Sites users to create a false head section so that js and css can be used

**jscheuer1** · 02-04-2014, 02:09 PM

Code:

<script type="text/javascript">
jQuery(function($){
	$('img').click(function(){
		top.scrollTo(0, 400);
	});
});
</script>

**Mark Ellis** · 02-04-2014, 05:22 PM

Thanks, John

I Paste your code into the body of the xml (gadget) file, and uploaded to Google - but it hasn't made any change.

The actual html that I have access to on the page that the visitor sees is

HTML Code:

<h2 style="text-align:center"><font size="6">Trial of the Lightbox 2.6 in Google Sites</font></h2>

<br>

<div>

<img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Lightbox+2.6+trial%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D1417'dim'%5C%3D10'%3D10'%3D500'%3D1417'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&amp;sig=9Z9NXv0SJo4lDxc6_Z0QEQY82Uo" data-igsrc="http://24.gmodules.com/ig/ifr?mid=24&amp;synd=trogedit&amp;url=https%3A%2F%2Fsites.google.com%2Fsite%2Fdorsetdogshow%2Flightbox-2-6-trial.xml&amp;h=1420&amp;w=100%25" data-type="ggs-gadget" data-props="align:center;borderTitle:Lightbox 2.6 trial;height:1420;igsrc:http#58//24.gmodules.com/ig/ifr?mid=24&amp;synd=trogedit&amp;url=https%3A%2F%2Fsites.google.com%2Fsite%2Fdorsetdogshow%2Flightbox-2-6-trial.xml&amp;h=1420&amp;w=100%25;mid:24;scrolling:no;showBorder:true;showBorderTitle:null;spec:https#58//sites.google.com/site/dorsetdogshow/lightbox-2-6-trial.xml;width:100%;wrap:false;" width="500" height="1420" style="display:block;margin:5px auto;text-align:center;" class="igm">

<br>


</div>

All other code on/for the page (header, navigation, footer) is not accessible to the webmaster as they edit the page content.

The code

Code:

<img src="https://www.google.com/chart?

is the start of the iframe gadget that my xml file links to.

So I don't know if there is a way to get the js to load Lightbox into http://www.dorsetdog.com/lightbox-2-...n-google-sites - instead of loading in the iframe gadget

**jscheuer1** · 02-04-2014, 06:19 PM

Funny, it works with Opera, but others (IE, Firefox, Chrome) see it as a security violation. Since it is an iframe and originates elsewhere than dorsetdog.com it technically is a violation. That will prevent other efforts to cross frame script this. So the simplest solution would be to make the iframe shorter (height), -say about 500px give or take.

**Mark Ellis** · 02-04-2014, 08:41 PM

Thanks again for trying, John.

Think I need to bite the bullet and move on from Lightbox.

I've been playing around (within my capabilities) with a couple of other ones

I love the way that Jack Anderson's gallery looks and plays - but wish the next and previous buttons were either side of the flim strip, instead of all together.

www.dorsetdog.com/vertical-gallery-slideshow

But also love the way that the Galleria slid show brings photos straight out of Picasa, removing the need to add reams of code. They on Stack Overflow have got it to Autoplay. But once a viewer has clicked on one photo to halt and view it, one has to refresh the page to get it going again

www.dorsetdog.com/galleria-slide-trial-in-google-sites

Many thanks again John.

I'll go and play some more, and try to merge them.

**Mark Ellis** · 02-05-2014, 07:19 PM

I had a bit of an eye opener today.

Like all people in the know, I regularly update windows and programs/software to help windows.

I do some voluntary work for a training provider, who have a number of computers running various versions of Windows. The IT department fail to update the computers, so they're a lot like ordinary computer owners computers.

I viewed the various slide show galleries on my website using Firefox, IE and Chrome on various computers running XP and Windows 7.

The only slideshow that would run properly on every machine was the Picasa (Google + ) slide show that inserts direct from Picasa. All the other ones (Lightbox, Galleria, Gallery view) either displayed badly, had a warning in IE "Your page is in Quirks mode", or didn't display at all.

And as most people visiting my website probably aren't IT au fait, I feel a bit lost now

This is the one that worked everywhere

www.dorsetdog.com/corscombe-2011-dog-show-photos

**jscheuer1** · 02-06-2014, 01:47 PM

And that one doesn't work in Opera. Even with a regular web page there will be some problems being cross browser. But with the setup you describe, where everything is forced into an iframe, and script code is further constrained, I'm not surprised at the results you're reporting.

**Mark Ellis** · 02-07-2014, 08:59 AM

I gave Google a shock yesterday

I live in the world of desktops and laptops running Windows, and owning a dumb phone.

I was told by a number of friends yesterday that a Google Picasa photo album inserted into any Google Sites website - does not show when viewed by any mobile device (iPad, Smart phone, Kindle, etc)

Me thinks that Google have some work to do