I only can see one gallery in the Highslide, need help

[Oacn]

hi everyone, I've been reading about creating two galleries in the same page with Highslide, I followed the directions step by step, but on the page, I can only see one gallery, the other gallery just says "loading". The two gallerys works fine in local mode, but when I load the galery on the server, the problems I mentioned before appear. The gallery that works in the server is the gallery 2


here is the code, is the same that I have in local mode and loaded in the server, with the same folders and images:

Script code:

Code: Select all

<script type="text/javascript" src="js/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide.css" />

<script type="text/javascript">
	hs.graphicsDir = 'js/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.fadeInOut = true;
	hs.outlineType = 'rounded-white';
	hs.headingEval = 'this.a.title';
	hs.numberPosition = 'heading';
	hs.useBox = true;
	hs.width = 600;
	hs.height = 400;
	hs.showCredits = false;

	hs.addSlideshow({
		slideshowGroup: ['group1', 'group2'],
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			position: 'top right',
			offsetX: 200,
			offsetY: -65
		},
		thumbstrip: {
			position: 'rightpanel',
			mode: 'float',
			relativeTo: 'expander',
			width: '210px'
		}
	});

	// Para añadir mas galerías!
	var miniGalleryOptions1 = 
	{
		slideshowGroup: 'group1',
		thumbnailId: 'thumb1',
		numberPosition: 'caption',
        transitions: ['expand', 'crossfade']
	}
	
	var miniGalleryOptions2 = 
	{
		slideshowGroup: 'group2',
		thumbnailId: 'thumb2',
		numberPosition: 'caption',
        transitions: ['expand', 'crossfade']
	}

</script>

HTML code :

Code: Select all

<!-- Thumbnail 1 -->

             <div id="apDiv44">
              <div align="center"><span class="highslide-gallery"><br />
              <a class='highslide' id="thumb1" href='slides/s_image001.jpg' 
              onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del Niño"><img src='thumbs/t.jpg' alt='' width="115" height="100"/></a></span><br />
  </div>
</div>      
           
           <!-- Thumbnail 2 -->
           
           <div id="apDiv45">
              <div align="center"><span class="highslide-gallery"><a class='highslide' id="thumb2" href='slides/p_image002.jpg' 
              onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE"><img src='slides/s_image002.jpg' alt='' width="115"  height="100"/></a></span><br />
             </div>
           </div>

<!-- body of the gallery 1 -->


<div class="highslide-gallery">
  <div class="hidden-container">
 
  <a class='highslide' href='slides/SAM_3972.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del niño en Laja">  <img src='thumbs/SAM_3972.jpg' alt=''/></a>
  <a class='highslide' href='slides/SAM_3974.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del niño en Laja">  <img src='thumbs/SAM_3974.jpg' alt=''/></a>
  <a class='highslide' href='slides/SAM_3977.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del niño en Laja">  <img src='thumbs/SAM_3977.jpg' alt=''/></a>
  <a class='highslide' href='slides/SAM_3983.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del niño en Laja">  <img src='thumbs/SAM_3983.jpg' alt=''/></a>
  <a class='highslide' href='slides/SAM_3986.jpg' onclick="return hs.expand(this, miniGalleryOptions1)" title="Día del niño en Laja">  <img src='thumbs/SAM_3986.jpg' alt=''/></a>

<!-- body of the gallery 2 -->

<div class="highslide-gallery">
 <div class="hidden-container">

  
  <a class='highslide' href='slides/p_0001.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE">  <img src='thumbs/p_0001.jpg' alt=''/></a>
  <a class='highslide' href='slides/p_0002.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE">  <img src='thumbs/p_0002.jpg' alt=''/></a>
    <a class='highslide' href='slides/p_0003.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE">  <img src='thumbs/t_0003.jpg' alt=''/></a>
  <a class='highslide' href='slides/p_0004.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE">  <img src='thumbs/p_0004.jpg' alt=''/></a>
  <a class='highslide' href='slides/p_0005.jpg' onclick="return hs.expand(this, miniGalleryOptions2)" title="Galería VIBE">  <img src='thumbs/p_0005.jpg' alt=''/></a>

           

Please I need your help!

[RoadRash]

Hi,

Can we please see your live page?

[Oacn]

of course, http://octaviocortes.host56.com/Galeria.html

I don't know what is wrong..

[RoadRash]

The 1. gallery can't be opened because the large image is missing from the server: http://octaviocortes.host56.com/slides/SAM_3971.jpg

[Oacn]

Oh, thank you very much Mrs Hilde, the extension name of the images were in uppercase.

Muchas gracias!