Results 1 to 9 of 9

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

  1. #1
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Lightbox

    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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Mark Ellis (02-04-2014)

  7. #6
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #7
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Jul 2012
    Location
    Dorset, England
    Posts
    67
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Replies: 0
    Last Post: 11-10-2013, 02:23 PM
  2. Step Carousel Viewer v1.9 Page Jumping on click
    By Coldmoonrising in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-06-2012, 05:14 PM
  3. Replies: 1
    Last Post: 04-18-2009, 05:51 PM
  4. Thumbnail Image jumping
    By n1kk1 in forum CSS
    Replies: 5
    Last Post: 01-28-2009, 02:20 PM
  5. Open new web page showing lightbox thumbnail grid
    By gkornbluth in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-04-2008, 05:02 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •