It is currently Sat Oct 25, 2014 1:10 pm Advanced search

Controls loading numerous time in top left corner. Also...

Help for using the Highslide Editor, the visual way of setting up Highslide.

Controls loading numerous time in top left corner. Also...

Postby schiavon » Sat Jul 09, 2011 6:20 am

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.
schiavon
 
Posts: 1
Joined: Sat Jul 09, 2011 1:58 am

Re: Controls loading numerous time in top left corner. Also...

Postby 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>):
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
[hilight]<!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]-->[/hilight]

<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
[hilight]<!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]-->[/hilight]

<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 )"
to this:
Code: Select all
onclick="return hs.expand(this, [hilight]config2[/hilight] )"


Find the first image in the engagement gallery and change the id to thumb2:
Code: Select all
   <a [hilight]id="thumb2"[/hilight] href="highslide/images/large/MTWASH.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config2 )">
      <img src="highslide/images/thumbs/MTWASH.jpg"  alt=""/>
   </a>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway


Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 2 guests

cron