Image Borders & Supersize Questions

Hi,

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.

https://community.auctiva.com/e...491013013#8491013013

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.

Danno

That code makes sense to me becasuse I am using CSS for other formatting in my template, but it didn't seem to work. I tried it at the beginning of the html with the rest of my CSS and at the end all by itself. It wouldn't be ineffective because the image is inside a table would it?

Hi,

That code was useful for override of Auctiva's code with their standard imaging methods / tags.

Hmmmm.....which imaging tag(s) are you using?

Can you copy - paste your template to www.practicewriter.com and post back the link to the Forum. I'll see if they've got a new wrinkle that needs update for what you are using.

Danno

Sorry it's taken me a while to get this reply posted. Here is the code link. http://PracticeWriter.com/?5EC72

Hi,

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

/*-----------------auctiva_image_border----------------*/
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.

Danno

BTW...very nice pro template you got there. 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.

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 {
width:350px;
height:350px;
}

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...

Hi,

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.

Danno

Hi,

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 = 'http://www.auctiva.com/hostedimages/showimage.aspx?gid='
+ 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]');
//-->
</script>

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: http://www.auctiva.com/hostedi...s=0&format=0&lgdin=1

In my custom template, the link looks like:
http://www.auctiva.com/hostedi...l,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!

Hi,

I updated that text after posting early to get rid of some test code adds that weren't needed for final (missed that on original copy).

It looks like the &images element is showing undefined. I copied the code off the Forum and back to my account for recheck and didn't get the error. Try copying again...

Danno

quote:

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).

Danno

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.

Hi,

You're welcome for the help. Sorry about the wrong version. Should never do Forum help before my 2nd cup of cofffffffee. 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....

Danno

Hi,

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.

Danno

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

Hi,

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" ). 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.

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!

Danno