Hi Danno! Would like your expertise!

Hi Deb,

The main picture is operating at a fixed 3:2 aspect ratio of 694H x 461W. However, your pictures appear to be cropped to a very thin / narrow aspect ratio of nearly 2:1 with an example of 647H x 347W in this photo:

http://img.auctiva.com/imgdata...bimg/273935283_o.jpg

That's causing the picture to stretch horizontally to fit the frame (like stretching a ballon).

The picture is also cropped shorter at 647px than the viewer at 694px which can cause image pixelation / fuzzyness.

In simple terms....it's a problem with the way the pictures are cropped vs. the design of the template main image and thumbs.

Danno

I guess I just don't know how to crop the pics and maintain the ratio, so for the next shoot I did no cropping at all, and, the pics looked good.

In the meantime, I found another layout of the thumbnails, enlarged pic and description area that I would like to swap out in my template.

I have reworked the code as much as I know how to do, and I am hoping you will have some time to help me out on tweaking it! Pretty please!

I'd like to move the store, contact, newletter blog line over so that it is right justified with the big pic.

The template that I liked has the top of the thumbnails and the big picture aligned. They look aligned in the practicewriter preview, but when I actually do a preview from the lister page, the big picture is lower. Can't figure it out!

And, I finally got my thumbnail code to show pics, but the mouseover to enlarge is not working in preview.

Here's the link:

http://PracticeWriter.com/?610E0

Hi Deb,

I'll take a guess on the crop problem.... The new camera (a Digital SLR variety) is using a default aspect ratio of 2:3. The plain digital cams default with 3:4. I think my daughter's Pro Nikkon digital SLR does that too. You got lucky with the new cam. Take the pixel width and divide it by the pixel height of one of your raw photos from the cam. If the result is about 0.67, that's 2:3.

I took a quick look at the code and noticed that the script at the bottom of the text has a syntax error for the images, e.g. pic[1]="IMAGE1_URL"; should be pic[1]="[IMAGE1_URL]"; (missing the brackets which all Auctiva tags require).

The main image near the top of the code is showing a default link to an Auctiva hosted picture. That one probably needs to be replaced with the [IMAGE1_URL] tag, so your default image on load is the 1st picture.

Got a favor to ask. The code for the old template apparently is using links to images in the ClixTrix library at photobucket. Since you're updating the template, could you please move the links to images at Auctiva or your own photobucket account. I believe it's the three images I created for you, slogan, tag line, and the cropped banner. I'll keep them operational at the ClixTrix account until I see you've got them safely moved (or give me an OK). Photobucket is notifying me of high account usage. Hopefully, they won't cutoff usage (but that can happen). Don't panic, I don't think combined usage is yet high enough for that to occur. That account was setup for testing only, so it doesn't have the benefit of a paid usage limit.

Danno

Oh....and SophieBox Wildcat Edition is now prepared for beta-1 and is in the eBay Developer's Sandbox undergoing shakedown tests.

Hi Danno!

Yes, you can delete those photobucket files...many thanks, and I didn't realize you were hosting them!

Yes, my new camera is a 2:3 ratio...my problem is I don't know how to crop a picture to keep that ratio! (the simplest things...!)

That upper auctiva pic is for the 658 banner (pink one) at the top of the page

I've been googling and fooling with that code since 3p.m. and still haven't figured out how to make the thumbnails enlarge into that big box!

My best guess is that when I found a listing that I loved the thumbnail layout, the enlarged pic, and the description/measurement box, that I didn't copy something in the header code that makes the whole thing work. I only copied from where the description tag onwards...

The reason I love the new layout is because as a viewer, one can scroll a little, frame that section of the listing on their monitor, and see without having to scroll up and down from thumnails to view the whole big picture.

We are rained out on this side of the state; if you are as well, maybe you will have time to help this evening!

Happy 4th!

Hi Deb,

All scripts to do the photo replaces operate almost identically, i.e. mouseover of the thumb fires a script that substitutes the replacement image associated with the thumb. The visual-arrangement of thumbs and main image is really not connected to the function of the replacement or the code.

Practicewriter has the unfortunate problem of corrupting Javascript by translating the ampersand symbol from & to &-amp; for the symbol. You can see that where the logic tests for "and" are &&, but are translated by practicewriter to &-amp;&-amp; (dash added to display in Forum). Although the script can work on practicewriter (and my mouseover and check suggests it does), a copy of the script gets the corrupted version. I do see some cases of that problem on the page, but it appears there is more script here than the simple mouseover replace. I'll have to study it for awhile to see if I'm missing something. It's a little like taking a page from a novel and trying to figure out the plot of the book.

Since photobucket gives activity reports and did show heavy use through June (over 58,000 hits), I'll check to see if there is any current use of the photos before I delete them.

Danno

Update.....

This script appears to be the only code that is truely involved with the image replace.

This section loads the 8 images to the browser cache and the swap function is the code that's run when the mouseover is fired for each thumb.

<SCRIPT>
var pic=new Array();
pic[1]="[IMAGE1_URL]";
pic[2]="[IMAGE2_URL]";
pic[3]="[IMAGE3_URL]";
pic[4]="[IMAGE4_URL]";
pic[5]="[IMAGE5_URL]";
pic[6]="[IMAGE6_URL]";
pic[7]="[IMAGE7_URL]";
pic[8]="[IMAGE8_URL]";
function swap(num){document.getElementById('bigPic').src=pic[num] }
</SCRIPT>

This snippet of code that's on the the HTML IMG tag for each thumb is the call for that function to do the replace.

onmouseover="swap(1);" <--- this one calls swap to replace main image with image #1.

Hope that simple explanation helps.

I see other code, but I'm unsure of its intended use....appears to not really have any in the context of the document.

From what I've been able to see via googling, all of the code for a mouseover function starts with some code in the header...is that correct? Then the code that you have highlighted in your last post goes in the body?

quote:

function swap(num){document.getElementById('bigPic').src=pic[num] }
</SCRIPT>

In the above code, the getElementById('bigPic'), does what? Do I have to have something called bigPic?

Hi,

Well, technically, ebay doesn't allow use of <head> tag, and they/Auctiva will/should delete the head code and script when it's placed there.

Just place the script after the 1st HTML tag in your template for protection from deletion. If you look at the old template, use that as an example.

The "getElementById" is essentially looking up the ID of the tag where your main image is in the document. If you look in the code at the IMG tag for the main image, it has id="bigPic". That's how that function knows which image is the target for that replacement. src="..." is the URL of the image(s). So, the replace is literally the string for the URL on the statement. You previously defined the array of images as pic[1], pic[2], etc. and stored the URL string unique to each, so the call from mouseover just passes the function the number (num variable) of the image.

Putting it all together....all the images links are preloaded and their source URLs are added to array pic (1 - 8). With mouseover of each thumb, you're calling function swap with a specific thumb/image number in the array asking the function to locate the main image and replace it's URL source/src string with the new image's.

Hope that makes some sense.

Danno

It makes sense, I just don't know why it is not working in Auctiva preview...will keep trying!

Hi Deb,

Try this code.

http://practicewriter.com/?61202

Danno

HOW IN THE H...L???

I am going to print your code out and my code out and compare line by line to see what I have been doing wrong!!

I don't know how I earned a whiz after my name on this forum!!!

I will say that your code looks much cleaner, and YES, IT WORKS!!!!!!!!!

Too bad there isn't an emoticon that blows you a kiss!!

Hi,

Yes, I tidied it up a little and rebalanced the design. Hopefully, no changes that are not in keeping with your final needs.

You're welcome and have a good one.

Danno

Update....

Deb, I took some time this morning and ran some tests of the design and additional code checks. I found some problems. The main picture was anchored to bottom. This would have caused it to float down the page if the description ran long. I changed it to "top". The [DESCRIPTION] was set inside a paragraph element. However, you typically use paragraphing (more than one) in your description text. That would create paragraphs nested inside a paragraph, which is an illegal construct (and possibly one of the reasons many report description code/text being dropped by the editor). I changed that to a division. I also added some padding to the links bar, so the text wouldn't overrun the bottom (like the "g" on Blog). A few other minor code touch-ups and one missing closing tag on an element were resolved. I also examined one of your active listings to see if the description elements would fit in the area. Width is OK and height really depends on your listing (and is how I caught the picture anchor problem).

I saved the result back to my prior practicewriter link. Sorry I didn't have time yesterday to catch these problems.

Good evening! I will take time later on to copy the new code you tweaked this a.m. into the lister form, and see how it looks.

When I copied it yesterday, it looked fine in preview, so I assume that the code problems you were able to find this morning would have showed up once it was published...I will try and launch an auction this evening using the new template, if my time goes well!

Update:

Here is the almost finished new template, which you will recognize as part of "our" original design, and the new pic/description section.

I am tweaking the color of the table boxes to a lighter gray than what we originally had. It looks like you used the table class attribute to define the background color for the table sections like Store Information, shipping, payment, etc. I googled to learn what table classes are and changed the code from abgdkgray to abgltgray, using pure intuition, not knowledge! That changed the table bg on the Store Policies and Important Information section, but I cannot find the code to change the background and font color on Payment, Return Policy, About Me, and Contact Us...still looking, but wanted you to see the update.

http://PracticeWriter.com/?612FD

Hi Deb,

I looked at the link and active listing and did some code fixes to assist. I reestablished the Style Sheet and pulled font families and colors back to the sheet. I added an outer table at 100% width for flexibility to operating a color mat when desired and used #eee for effect. I added a 1 pixel #888888 border to the inner table. I added a PowerSeller logo from the ClixTrix library at photobucket (please save and upload to yours if you like it and replace the link). I also added back the mouserover greens to all your links. However, the blog link doesn't seem to be operable (no link).

You should be able to now use the Style Sheet to change the font color (currently #333333) on the description and seller details sections.

By moving to the thinner design, you can now easily add the Store search and categories boxes at the left using your eBay Store customization.

See my prior link for changes.

Danno

Edit: If you're having problems with 2:3 aspect ratio cropping, I'd recommend use of Picasa. Picasa has a 4x6 photo crop feature (4x6 is 2:3 aspect ratio).

Hi, it looks really good...I just took a quick look before dinner.

thanks for fixing the table borders, you had them there before and with my fiddling I wiped them out. There also was a gray box around the store policies and important information header that I lost. The font for that header and everything under it changed as well...it was a sans serif font. I'll take a look after dinner.

Hi Deb,

Just got back to checking and found "another" minor problem in the Shipping section that I fixed. There was a paragraph code around the shipping tag and the right International side needed a little TLC with margins to get balance.

I remove that background on the policies header, only because it seem verbose with the sectional headers. It's very easy to add a background color to that section, but it just looked better (to me ) with it white!

Sorry....I'm very distracted with sandbox tesing of Wildcat, so only can give spare time.

Let me know if you see any visual problems that I can give tips or help adjust.

Danno

Deb,

I've created a new version that adds support for buyers that don't browse the eBay site with scripting enable on the browser. I added a noscript code section that will display pictures 2 - 8 when the mouseover can't work with scripting disabled. I've given you the option of using either a scrollbar or a vertical column of pics by selection of auto or visible in the Style Sheet.

I also added a new id for the policy section and pulled that into the style sheet, so you can change the text, background color, border, etc. for that banner. Note, I added a simple 2px border in the same color as the lower headers, as a starter.

It's updated on the practicewriter. To see the noscript version of the page, disable scripting in Firefox. It's currently set to auto, so a vertical scrollbar appears with all the pics.

Many folks are getting disgusted with eBay's scripting problems and only visit the site with scripting disabled. Hopefully, this gives you more viable buyers (and those that see you doing this will hopefully appreciate the gesture to their preference).

I hope this all makes sense and I'm not adding further confusion.

BTW...I would strongly recommend you install Firefox and/or Safari browsers to see how your listings look in other than IE. That's very important, as some changes can have bad effects in those browsers.

Danno

Hi Hi!
Just got back to looking this evening...dog lays on the floor behind my chair, and went off when he heard a car drive up to the house...jangled my nerves so bad, I was shaking...middle of the night now, so hopefully some peace and quiet while I read what you did!

edit: which browser do you use? I had a look at the firefox site--does it really make browsing faster than when using IE?

Hi Deb,

I use IE8 Firefox and Safari (all 3). I use all 3 for both general net and work/testing. Firefox and Safari are both relatively easy to install and they both have semi-automatic update capability. Safari has some very nice features for developers that I specifically like. Firefox tends to launch a little faster and does tend to run scripts a little more stable. Safari also does somewhat better and is the smoothest in rendering many of the SophieBox features like the super-zoom, magna-zoom and slideshow.

There are those days when a site (like Auctiva) does an update that gives problems in one browser, but works OK in another. It's good for that too.

It looks like eBay has finally switched to buyers getting the new listing-page design.

Danno

Hi Danno,

I am new to auctiva. I made a custom template which looks perfect when I am previewing it but when I post it to Ebay, it doesn't show any of my template. I really could use your help. I have been trying to figure this out for over 15 hours. Any help would be much appreciated.

Kind Regards,

Jim