FIRST OFF, I must say thank you to creators of this site. I searched for a while to find a website with an easy to create image viewer. After a lot of searching, I found you guys, and must say that this site is incredible. Its so easy to use, and very well designed for user ease. So yeah... THANK YOU!!!
Problem 1:. Control codes are loading numerous times in the top left corner.
Problem 2: I am trying to use numerous galleries on one page and they are running together on the side thumbnail viewer. Can anyone help with these problems?
Here is a link to my actual webpage.
http://schiavonphotography.com/index.php?p=1_2_gallery
If it helps, I am using the "upload your files via FTP function since I am not very experienced at this kind of stuff. Hopefully there is an easy to use solution! =)
Thanks for any help provided.
Our support has moved
Instead of continuing the battle against spammers, we decided to close the forum for new users and topics. But don't worry, there are still plenty of ways to reach us. Most notably, we will move our attention to Stack Overflow, where we will monitor questions under the tags [highcharts], [highstock] and [highslide].
For other ways of getting in touch with us, see Highcharts Support or Highslide Support.
Torstein Hønsi, CTO, 2013-01-29Controls loading numerous time in top left corner. Also...
2 posts
• Page 1 of 1
Controls loading numerous time in top left corner. Also...
by schiavon » Sat Jul 09, 2011 6:20 am
- schiavon
- Posts: 1
- Joined: Sat Jul 09, 2011 1:58 am
Re: Controls loading numerous time in top left corner. Also...
by RoadRash » Sat Jul 09, 2011 11:03 pm
Hi,
1) The controlbar loads numerous times because you have included the highslide.config.js file four times in your page.
This part must be included only once per page, and it must be included in the head section of your page – right before the closing head tag (</head>):
Below is the code you’ve pasted for the wedding gallery – you need to remove the highlighted part:
Below is the code you’ve pasted for the engagement gallery – you need to remove the highlighted part:
2) You need to edit the highslide.config.js file to avoid the galleries to act like one large gallery. Open highslide.config.js in Notepad or similar (do NOT use Word or similar!).
Paste this at the bottom of the file:
As you can see, this is almost the same as what you already have, except that 1 is replaced with 2.
Save the file and upload it to the highslide folder.
Change all the onclicks for the engagement gallery (the second gallery) from this:
Find the first image in the engagement gallery and change the id to thumb2:
1) The controlbar loads numerous times because you have included the highslide.config.js file four times in your page.
This part must be included only once per page, and it must be included in the head section of your page – right before the closing head tag (</head>):
- Code: Select all
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
Below is the code you’ve pasted for the wedding gallery – you need to remove the highlighted part:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS - Custom Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<h3>wedding</h3>
<div class="highslide-gallery">
<a id="thumb1" href="highslide/images/large/KISS.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/KISS.jpg" alt=""/>
</a>
<div class="hidden-container">
<a href="highslide/images/large/DSC_039511.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_039511.jpg" alt=""/>
</a>
<a href="highslide/images/large/DSC_0151.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_0151.jpg" alt=""/>
</a>
<a href="highslide/images/large/dancing.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/dancing.jpg" alt=""/>
</a>
<a href="highslide/images/large/DSC_00662.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_00662.jpg" alt=""/>
</a>
<a href="highslide/images/large/DSC_01881.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_01881.jpg" alt=""/>
</a>
<a href="highslide/images/large/CAKE3.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/CAKE3.jpg" alt=""/>
</a>
<a href="highslide/images/large/book1.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/book1.jpg" alt=""/>
</a>
<a href="highslide/images/large/DSC_03561.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_03561.jpg" alt=""/>
</a>
<a href="highslide/images/large/rings.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/rings.jpg" alt=""/>
</a>
<a href="highslide/images/large/DSC_02501.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/DSC_02501.jpg" alt=""/>
</a>
<a href="highslide/images/large/APPCLOSEUP.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/APPCLOSEUP.jpg" alt=""/>
</a>
<a href="highslide/images/large/BUBBADANCING.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/BUBBADANCING.jpg" alt=""/>
</a>
</div>
</div>
Below is the code you’ve pasted for the engagement gallery – you need to remove the highlighted part:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS - Custom Example</title>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<h3>engagement</h3>
<div class="highslide-gallery">
<a id="thumb1" href="highslide/images/large/MTWASH.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/MTWASH.jpg" alt=""/>
</a>
<div class="hidden-container">
<a href="highslide/images/large/HAPPY.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/HAPPY.jpg" alt=""/>
</a>
<a href="highslide/images/large/KISSINGBRIDGE.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/KISSINGBRIDGE.jpg" alt=""/>
</a>
<a href="highslide/images/large/BRIDGE.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/BRIDGE.jpg" alt=""/>
</a>
<a href="highslide/images/large/STEFCLOSEUP.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/STEFCLOSEUP.jpg" alt=""/>
</a>
<a href="highslide/images/large/BOARDWALK.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/BOARDWALK.jpg" alt=""/>
</a>
<a href="highslide/images/large/RINGS.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/RINGS.jpg" alt=""/>
</a>
<a href="highslide/images/large/FLOWER.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/FLOWER.jpg" alt=""/>
</a>
</div>
</div>
2) You need to edit the highslide.config.js file to avoid the galleries to act like one large gallery. Open highslide.config.js in Notepad or similar (do NOT use Word or similar!).
Paste this at the bottom of the file:
- Code: Select all
var config2 = {
slideshowGroup: 'group2',
thumbnailId: 'thumb2',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};
As you can see, this is almost the same as what you already have, except that 1 is replaced with 2.
Save the file and upload it to the highslide folder.
Change all the onclicks for the engagement gallery (the second gallery) from this:
- Code: Select all
onclick="return hs.expand(this, config1 )"
- Code: Select all
onclick="return hs.expand(this, config2 )"
Find the first image in the engagement gallery and change the id to thumb2:
- Code: Select all
<a id="thumb2" href="highslide/images/large/MTWASH.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config2 )">
<img src="highslide/images/thumbs/MTWASH.jpg" alt=""/>
</a>
-
RoadRash - Posts: 8174
- Joined: Tue Jul 15, 2008 8:43 pm
- Location: Fredrikstad, Norway
2 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 4 guests