Skip to main content

I know that in the predesigned templates, the image borders vary to match the style of the template. How can I make these changes in my custom templates. I know how to do this with html, but not with the auctiva image tags.

Is it possible to have only one image show on thte listing itself, but have multiple images in the supersize gallery. I've tried selecting 2 images in the listing editor, and then choosing only one image in "Modify Layout". It shows only one image in the template preview, buy when I save and preview the whole listing, both images show up again.

Original Post

Replies sorted oldest to newest


Hopefully, this thread with my prior CSS code suggestion still works for the borders and text color override. Give it a shot and let me know.

That later suggestion might work with a custom supersize page with a mouseover of thumbs on the supersize as one possibility. However, I'm not highly in favor of "hiding" info/pics, as a buyer might not look (or miss that function) and that's where misunderstanding starts...IMO. If pagespace is the issue, you might try Auctiva's Thumbnail feature. That gives you all the pics as thumbs with one main image and the supersize operates as usual.


Try adding this to the navigation section on your style sheet (in place of that prior codeset I recommended).

a.supersizelink img.auctionimage {border: 2px solid #71c1be;}
a:visited.supersizelink img.auctionimage {border: 2px solid #71c1be;}
a:active.supersizelink img.auctionimage {border: 2px solid #71c1be;}
a:hover.supersizelink img.auctionimage {border: 2px solid #3ef5f8;}

I used the matching blue and bright hover blue from your template for those border color code numbers.


BTW...very nice pro template you got there. Smile On the original problem of multiple supersize from single image, I'm working with script codesets for widget zoom imager (on-page zoom with NO POPUP) that I may be offering at some point in a store. I like your upper box design. With the current design, you could use a row of about six or seven 40 x 40 micro-thumbs under the image with simple mouseover to switch images and stay with that square 350 x 350 main image viewer. Code for popup supersize could be adapted from Auctiva's codeset. However, I'm trying to move away from secondary windows/popups that avoids more windows/tabs in favor of on-page animation.
Last edited by danno
Thanks, that works well. The only issue now is that we were scaling our image to 350x350 and Auctiva uses 400x300. I tried using:

img.auctionimage {

It worked, but the resulting image was very pixelated. Is that just the way it's going to look if I use CSS to resize or is there a better way of doing it. If I can't make it look better at 350x350, I'll just stick to the Auctiva default and move the description column closer.

Thanks again...

The [IMAGEx] tag uses the stored 400 x 300 max image, so a square image stores at Auctiva at 300 x 300 (governed by height limit) for the "Standard" image. Yes, that would pixelate going higher to 350 x 350. You could drop-back to what you've been doing with your own click to supersize using the original image URL or mimic Auctiva's query code server call for the supersize page. Downsizing the image (except to micro-thumb size) generally does look fine, and I assume that's what you've been doing. Note, that query code call with a string of image numbers has possibility for the multiple image supersize you wanted. It would require some scripting to build the query string from URL substrings.

This is why (at least one reason) I'm working on new viewers to compliment the Auctiva stock methods.


Here's a script you can test for dynamically adding the href with query string to call the Auctiva server for the supersize page. With this script you can add up to the 24 images and use the single page image as the anchor to call the supersize page for display of all (as you suggested). I would add some type of language to the text under the main image, indicating there are more images with the click. Note, I updated the code with your account ID for the GID ref.

<!--Example code for anchor and image -->
<a target="_blank"><img src="[IMAGE1_URL]" alt="" onmouseover="getQ(this);" /></a>

<script type="text/javascript">
<!--/* Freeware Script for Auctiva Supersize Images Anchor-linked page by ClixTrix Design Studio LLC */
var urlQ;
var qsGID = '1155031'; /* Replace with your Auctiva 5+ Digit Account # */
function getQ(i) {
i.parentNode.href = urlQ.substr(0, 72 + qsGID.length) +
i.src.substr(i.src.length - 15, 9) + urlQ.substr(81 +
qsGID.length, urlQ.length - (81 + qsGID.length));
function qsBuild() {
var image, images, formats;
for (var i = 0; i < qsBuild.arguments.length; i++) {
if (qsBuild.arguments[i].length > 0) {
if (i == 0) {
images = image = qsBuild.arguments[0].substr(qsBuild.arguments[0].length - 15, 9);
formats = '0';
else {
images = images + ',' + qsBuild.arguments[i].substr(qsBuild.arguments[i].length - 15, 9);
formats = formats + ',0';
urlQ = ''
+ qsGID + '&ppid=1122&image=' + image + '&images=' + images + '&formats=' + formats + '&format=0&lgdin=1';
qsBuild('[IMAGE1_URL]', '[IMAGE2_URL]', '[IMAGE3_URL]', '[IMAGE4_URL]', '[IMAGE5_URL]', '[IMAGE6_URL]',
'[IMAGE7_URL]', '[IMAGE8_URL]', '[IMAGE9_URL]', '[IMAGE10_URL]', '[IMAGE11_URL]', '[IMAGE12_URL]',
'[IMAGE13_URL]', '[IMAGE14_URL]', '[IMAGE15_URL]', '[IMAGE16_URL]', '[IMAGE17_URL]', '[IMAGE18_URL]',
'[IMAGE19_URL]', '[IMAGE20_URL]', '[IMAGE21_URL]', '[IMAGE22_URL]', '[IMAGE23_URL]', '[IMAGE24_URL]');
Last edited by danno
Wow! That works great! It is exactly what I wanted to do. I did test it with only a single image added to the listing, and the link took me to an error page. When I use another auctiva template with a single image the link looks like:

In my custom template, the link looks like:,0&format=0&lgdin=1

I would also like to customize the new window properties (size, address bar, etc.). I am familiar with the code to do this (in a simple link), but didn't want to mess with the javascript you created. Where can I put this code?

Thanks again for all of you amazing support!
I would also like to customize the new window properties (size, address bar, etc.). I am familiar with the code to do this (in a simple link), but didn't want to mess with the javascript you created. Where can I put this code?

The page is built by Auctiva on the basis of the parameters in that query sting call to the server (everything after the ? mark). Auctiva has never disclosed any details on customizable features of the page, so there's no way currently to change that server call.

Oh....and glad that script helps. It's from an older version I created sometime over the last year for another member. I brushed it up abit to be more generic, i.e. you can show more than one image and it dynamically creates the query to land on the correct image (just like Auctiva's code).

I must have copied the code before you updated it. It is working fine now! This is going to definately cut down our listing time, and helps customers navigate the page the way we'd like. If you'd like a link posted in our footer, I'd be glad to add a small one because I really appreciate your help.

Let me know as you get those other viewers developed. Smile

You're welcome for the help. Sorry about the wrong version. Should never do Forum help before my 2nd cup of cofffffffee. Smile I'm not "officially" open for business yet, but will let you know on opening day. Got to get all the legal LLC stuff done and some registrations. The help I give in the Forum is free. However, I may have some widgets and gadgets in a Store along with any subscriptions for services. ClixTrix is a registered eBay ID, just nothing there YET. Same for Auctiva. eBay's constant change of direction has been challenging to say the least.

One downside of the script method is the problem with buyer having scripting disabled on the browser. The work-around is addition of a <noscript> section. You could use that click text under the image as the script version text, and have a noscript section that does an simple array of anchored text / numbers for your own supersize page as replacement with noscript, i.e. click a number and get it's supersize image per your old method. Just a thought....


From your latest crop of listings, it appears the script is working OK.

One tip.... I would move the script inside the template. eBay's editor (on listing revision) has the nasty habit of stripping-out scripts and style sheets when they aren't nested in the code (most annoying), i.e. don't put them at the top of the code without some HTML element at very top to protect them from deletion. Moving the script to the bottom should work just as well.

Thanks for the advice. I have noticed that eBay does that. Especially since I wanted to edit a listing after it was posted, and the eBay editor really hated the script. I will try moving the script and style sheet to the bottom.

Maybe changing the topic a little, but I love your input on this stuff. Have you looked into a lot of the changes eBay is making in the middle of June. From what I understand they are moving the entire description into an iFrame. One thing I am pretty shure this will affect is my "Place Bid" button which currently takes you to the #paymentinstructions anchor. According to eBay the iFrame will keep the seller from interacting with the content of the actual eBay page.

That is not a huge deal, I can remove the button. Something that does bug me though, when I view my listing in the new format (which can currently only be seen by the seller) my background image of the two ladies is cropped to the width of my listing information. I sent a message to eBay about this issue, we'll see if they respond.

I don't know if Auctiva is planning on changing their preview display by June, but the only way to see how our listings will look on the new eBay page is to actually post the listing.

Thanks Again

Yes, I know about the IFRAME. In fact, I did a full series of listing tests at the eBay Developer's sandbox early last fall on the yellow design and came back with recommendations that I "was" going to post here ("incoming" Eek ). That is, until I saw how bad it was performing and some inside tips that they'd exhausted their budget on consultants trying to get that thing to work (old yellow version). I believe that's why they backed-off and came out with this latest version (#3 by my count). I didn't want to motivate folks to change (even though eBay made the suggestion on the developer's site), when I felt the design was flawed and probably wouldn't be used (at least at that point in time and with that inception).

The "crunch" you're seeing is due to their use of an undimensioned table (or at least that was the case when I last looked at the old yellow and the new monochromatic-gray versions). If you check the source in the IFRAME (right click within the FRAME), you should see a centered table with no width dimension (or cellpadding and spacing...what a waste of space) that encapsulates your description code. The work-around is to create an element that's got the width necessary to support a template background. Note, 100% won't work, as the parent eBay table has no dimension, i.e. 100% of zero is still zero. Roll Eyes

There are a few tricks I've tested, including dimensioning the undimensioned table with correct detection (that IFRAME is there) and some simple script. Note, eBay may show both IFRAME and non-IFRAME versions to buyers, i.e. a NOSCRIPT buyer doesn't see the IFRAME version.

The undimensioned table problem is why I've moved to static dimensioning to best operate for the needed crunch-free design aesthetics and load of the IFRAME. A slow-load of pictures without dimensional "bracing" can also cause an IFRAME collapse misfire and scrollbars....UG! Frown


Add Reply

Copyright © 1999-2018 All rights reserved.
Link copied to your clipboard.