Problem using Hs with infinite carousel

[smitdgr]

Hi all,

HighSlide is by far the best image viewer I have ever used. Kudos on the great work. I am trying highslide on a group of images and have hit a roadblock. I searched everywhere, but unable to find a solution.

I am using http://code.google.com/p/jquery-infinite-carousel/ to create an infinite carousel. Most thumbnail images are linked to a slideshowgroup. So I am using the mini-gallery HS example to build my gallery.

The problem:
The infinite carousel repeats the images to create the infinite effect. This has caused some confusion. HighSlide Slideshow always shows more images than it has. I am sure the problem is due to same slideshowgroup linked to multiple (cloned) thumbnails. [ somewhat similar issue http://highslide.com/forum/viewtopic.ph ... &sk=t&sd=a ]. The first image gets repeated in the slideshow, because it gets added in the hs.anchors (for every cloned image ).

Is there a way around this problem ? I tried removing duplicate entries in hs.anchors.groups, hs.anchors.images and hs.anchors.all. But, either I did something wrong or the approach of removing the duplicate entries is wrong.

Please help me. I am stuck

[RoadRash]

Hi,

The list elements in the carousel gets cloned on page load to create the infinite effect, and Highslide shows the images in the outprinted HTML markup ÔÇô also the cloned images. So this isnÔÇÖt a Highslide slideshowGroup problem.
Take a look at the markup for the basic example at the demo carousel page (http://sroucheray.org/blog/jquery-plugi ... -carousel/):

Code: Select all

<h4 class="hl">Basic example</h4>
<div id="viewport">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
<a id="simplePrevious">Previous</a>
<a id="simpleNext">Next</a>

But the outprinted HTML markup looks like this (Note the highlighted part: these are the cloned elements. Each visible element will be cloned):

Code: Select all

<h4 class="hl">Basic example</h4>
<div id="viewport">
	<ul style="width: 976px;">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	[hilight]<li>1</li><li>2</li>[/hilight]</ul>
</div>
<a id="simplePrevious">Previous</a>
<a id="simpleNext">Next</a>

I canÔÇÖt see how Highslide should be able to see the difference between cloned and not-cloned elements.

[smitdgr]

Hi RoadRash,

First of all, thank you so much for taking time to look into the issue and for replying.

I know the problem is not in slideshowgroup or HS (i never said it was) , but is there a workaround where I can remove the references to clones when i click on a individual thumbnail ?

Thanks again for taking time off your schedule to look into this issue. I really appreciate it.

[smitdgr]

Hi,

I fixed the problem. I am posting the solution here in case someone needs it

I added a new function (which checks if an array has a value already) and a global variable

Code: Select all

Array.prototype.exists = function(search){
  for (var i=0; i<this.length; i++)
    if (this[i] == search) return true;
		
  return false;
} 
var anchorList = [];

then in updateAnchors function

Code: Select all

updateAnchors : function() {
	var el, els, all = [], images = [],groups = {}, re;
	anchorList = []; //emptying the array every time
		
	for (var i = 0; i < hs.openerTagNames.length; i++) {
		els = document.getElementsByTagName(hs.openerTagNames[i]);	
		for (var j = 0; j < els.length; j++) {
			el = els[j];			
			re = hs.isHsAnchor(el);
			if (re) {
      if(!anchorList.exists(el.href)){ //if the element href does not exist in the anchorList array already ONLY then push it into hs.anchors
				hs.push(anchorList, el.href); // inserting the element href into the array so that we can check if this element is pushed into anchors already
				hs.push(all, el);						
				if (re[0] == 'hs.expand') hs.push(images, el);
				var g = hs.getParam(el, 'slideshowGroup') || 'none';
				if (!groups[g]) groups[g] = [];
				hs.push(groups[g], el);
				}
			}
		}
	}
	hs.anchors = { all: all, groups: groups, images: images };
	return hs.anchors;	
}

Thanks

[illusionest]

EDIT: sorry for topic bump; but i think its better than starting a new topic, since the problem is already here.

Hi smitdgr, and other Highslide helpers,

I also have the same problem as smitdgr, im using a jquery carousel script as well. The first image in each gallery is doubled up.

Question, where would i go to input this fix that smitdgr mentioned?

Im not familiar with Highslide's javascripts, so im unsure where to place these codes. I think it would be highslide-with-gallery.js, but im not sure which line.

Any help would be GREATLY appreciated!

Thank you!

[EarlyOut]

Instead of trying to mess with the highslide-with-gallery.js file, which would be easy to break, and which would make later upgrades difficult, it would be better to put these new/replaced functions in a separate file, like highslide-config.js, which you would then load from your page after loading highslide-with-gallery.js.

[illusionest]

Thanks for your suggestions EarlyOut!

Ok, i have placed smitdgr's codes in highslide-config.js, then called it out on my page:

<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="../highslide/highslide-config.js"></script>

However, nothing changed, had no affect. So i guess this requires a bit of tweaking? Any suggestions, experts?

Thanks!!

[RoadRash]

You canÔÇÖt add all this in a separate js file. The second part requires adding code to the highslide-with-gallery.js file (or highslide-full.js file).
This is what I think the previous poster meant, but I havenÔÇÖt tested it:
Include this in the head section before the highslide-with-gallery.js/highslide-full.js file:

Code: Select all

<script type="text/javascript">
Array.prototype.exists = function(search) {
    for (var i = 0; i < this.length; i++)
    if (this[i] == search) return true;

    return false;
}
var anchorList = [];
</script>

Open highslide-with-gallery.js (or highslide-full.js) and find the updateAnchors function (line 749/highslide-with-gallery.js - line 962/highslide-full.js in v. 4.1.13) and add the highlighted code (4 lines):

Code: Select all

updateAnchors: function() {
    var el, els, all = [],
        images = [],
        htmls = [],
        groups = {},
        re;
    [hilight]anchorList = [];[/hilight]
    for (var i = 0; i < hs.openerTagNames.length; i++) {
        els = document.getElementsByTagName(hs.openerTagNames[i]);
        for (var j = 0; j < els.length; j++) {
            el = els[j];
            re = hs.isHsAnchor(el);
            if (re) {
                [hilight]if (!anchorList.exists(el.href)) {[/hilight]
                    [hilight]hs.push(anchorList, el.href);[/hilight]
                    hs.push(all, el);
                    if (re[0] == 'hs.expand') hs.push(images, el);
                    else if (re[0] == 'hs.htmlExpand') hs.push(htmls, el);
                    var g = hs.getParam(el, 'slideshowGroup') || 'none';
                    if (!groups[g]) groups[g] = [];
                    hs.push(groups[g], el);
                [hilight]}[/hilight]
            }
        }
    }
    hs.anchors = {
        all: all,
        groups: groups,
        images: images,
        htmls: htmls
    };
    return hs.anchors;

},

[illusionest]

Hi Hilde,

Thank you very much for your help. I appreciate it!

Unfortunately, the added code stopped highslide from properly "flying out", and no longer functions.

Everything works perfectly fine; but the only problem is the first image (per gallery) is doubled up.

If you can have a look to see where i can add a fix that would be FANTASTIC!

Thank you very much!

[RoadRash]

IÔÇÖm sorry - one line was missing in the updateAnchors code. The code in my previous post is updated.

[illusionest]

IÔÇÖm sorry - one line was missing in the updateAnchors code. The code in my previous post is updated.

that's awesome!!! Thank you VERY much Hilde! That worked PERFECTLY!

Thanks!!!