Removing dropdown from search - How to ?

[Snooper]

t has taken me the best part of today to get to this point and I am now frustrated into a corner. In using the Carousel script as used by ISC I can see that the original writer says you can increase the number of visible thumb nails as well as how they are displayed. So with that in mind all I wanted to do was simply keep the function the script has so it will actiavte only when needed. Keep a reasonable thumb nail size, but expand the number of visible thumb nails horizontally and under the product detail for the item being viewed..

Anybody PHP/ CSS boffs know a way forward that might point me in the right direction?

[Tony Barnes]

You'll want to have a dig around in /javascript/product.functions.js, /javascript/jquery/plugins/jCarousel/jCarousel.js, and includes/display/productdetails.php

With regards to the number of tiny thumbnails, my understanding was you could have as many as you like?

Have fun, to date I've found the way that JS takes over CSS control of the images/divs the most frustrating thing about the "improvements" to the cart that came in later versions!!

[Snooper]

Owch.. !!

I’m now out of my depth.. I shall give this a go.. ty

[Tony Barnes]

Yes you can strip that out, have seen it done, not sure how though. You can probably get round it in the JS or CSS without going into the php (I thought you had meant only a couple of images had been served, here they are all present, just not displayed) - you'll want to turn off any hiding, and get shot of the prev/next buttons

[netjet]

Guys, as you seem that you are already using the caroussel, I want to know wich one you use, I would like to use it in the homepage as a diaporama of some products

thanks

[Snooper]

This removing the carousel is proving a major head ache. As a non javascript writer I took the advice given by tony and removed the javascript totally and focusing on the page ProductDetails.html I took away refrances to the script I nolonger needed. And so far I have reduced this -

Code: Select all

[color=#0000BF]<div class="ImageCarouselBox" style="margin:0 auto; %%GLOBAL_HideImageCarousel%%">
				<a id="ImageScrollPrev" class="prev" href="#"><img src="%%GLOBAL_IMG_PATH%%/LeftArrow.png" alt="" width="20" height="20" /></a>
				<div class="ProductTinyImageList">
					<ul>
						%%SNIPPET_ProductTinyImages%%
					</ul>
				</div>
				<a id="ImageScrollNext" class="next" href="#"><img src="%%GLOBAL_IMG_PATH%%/RightArrow.png" alt="" width="20" height="20" /></a>
			</div>
			<div style="%%GLOBAL_HideMorePicturesLink%%" class="SeeMorePicturesLink">
				<a href="#" onclick="%%GLOBAL_TinyImageClickJavascript%% return false;" class="ViewLarger">%%GLOBAL_SeeMorePictures%%</a>
			</div>[/color]

Down to this and then adding a change to the width of the div container ImageCarouselBox as my only other mod –

Code: Select all

[color=#0000BF]<div class="ImageCarouselBox" style="margin:0 auto;width:600px;%%GLOBAL_HideImageCarousel%%">
				<div class="ProductTinyImageList">
					<ul>
						%%SNIPPET_ProductTinyImages%%
					</ul>
				</div>
			</div>[/color]

Now I am discovering I'm hitting a wall that makes no sense. The div container class ProductTinyImageList has somehow stopped my being able to expand this to a width of (say) 599px so that the thumbnails from %%SNIPPET_ProductTinyImages%% can form a line of images rather than be attached to a carousel (I have not shown any mods to the above code as to keep the script clear for readers) I think (??) somewhere ProductTingImage has picked up some additional code that has seemingly locked its width size and position. I cant seem to find where in style.css where or IF I see it I have lost the plot and failed to understand it.otherwise whats going on??

I am at the stage where I am sure if I can extend the width of the div container ProductTimyImages maybe %%SNIPPET_ProductTinyImages%% will do its job and add up to the max of 8 thumbnails inline if called to do so.
Below is an image showing 'relative' positions of the images and where I am working the script above, but I do need help in untying my head on this one. Does anybody have a light to share on this?

[Tony Barnes]

Which JS have you removed? product.functions.js controls the size and layout of the images through some calculations - this could be where you are getting stuck.

[Snooper]

I thought I had cut away just the references’ to jCarousel .js and in doing this obviously removed the left and right thumb nail shift. The rollover and image enlarge however, is still in place. So also is the zoom function when called.

I shall look at product.functions.js as you suggest Tony even though Javascript remains a foreign language to me at the moment; I thank you for that posting..

[Tony Barnes]

You're over complicating it I think. Look in product.functions.js like I said:

Code: Select all

	var MaxCarouselWidth = $("#ProductDetails .ProductThumb").width() - (CarouselButtonWidth * 2);

This is changing the width of the carousel

Code: Select all

	var MaxVisibleTinyImages = Math.floor(MaxCarouselWidth/CarouselImageWidth);

This is changing the amount of images it will display

Code: Select all

	var carouselHeight = $("#ProductDetails .ProductTinyImageList").height();

This is changing the carousel height

Etc

Like I said, all in there for you to play with!! Leave any "var = " bits, and comment out anything else you think looks like it's in your way. The vars need to stay otherwise you'll get errors from calculations falling apart.

[Snooper]

Thanks again for a quick reply Tony.. before I had even left the forum in fact !!!

Okay, before taking your suggetion forward.. I went drilling down through the code –

<div class="ProductTinyImageList">
<ul>
%%SNIPPET_ProductTinyImages%%

My basic tracing shows me that my starting position (already known) is –
Div container ProductTinyImageList 207px x 108px.
Div container TinyOuterDiv from %%SNIPPET_ProductTinyImages%% starts 64px x 104px before padding from ul and li.

However, deeper drilling shows there are two lines in the above code when executed show no apparent script changes when viewed, but do happen to have code locked into them somehow in the background that is being generated on the fly and used. So in the case of –

<div class="ProductTinyImageList"> in the background this somehow becomes
<div class="ProductTinyImageList" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 207px;">

And <ul> also changes in background to become
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 276px; left: 0px;">

This confirms my observations and in ability to control script as it gets modified, even if I have no idea where the appened reference for them came from. I also see overflow:hidden; is back. From where ? It is no longer in the style.css ! And as for the numbers for both lines give as width this is calculated how ?

More work I think..