Improved Image Gallery

[Logan Rhodehamel]

UPDATE: Integrations for three image gallery viewers have been published to this thread. A screenshot and zip file is shown for each. The zip file contains a README.TXT with installation instructions.
****

If you have attached multiple images to products, you may notice that our more images viewer is not very fancy. With a plethora of gallery components, beefing up this area is not very difficult.

UvumiTools (http://tools.uvumi.com/gallery.html) has a gallery plugin for image viewing, based on the MooTools library. This is not the fanciest gallery, but it is released under an MIT style open source license. That makes it a contender for being a drop in replacement for our current solution.

Is anyone interested in giving it a whirl and giving any feedback? If so, grab the attached file. Then back up "ProductImages.aspx" in your store directory. Then copy the five files from the zip into your store folder. One will overwrite ProductImages.aspx. (There are also two new files for the images folder and two new files for the JS folder.)

[jmestep]

Pretty slick, Logan. I was just getting ready to try the old one, so I did this instead. I haven't looked at any of the settings for it, but I had trouble getting to a thumbnail for the last one when I had the third one enlarged. But maybe it can be tweaked so that the each image shows in the center or underneath.

[Logan Rhodehamel]

Pretty slick, Logan. I was just getting ready to try the old one, so I did this instead. I haven't looked at any of the settings for it, but I had trouble getting to a thumbnail for the last one when I had the third one enlarged. But maybe it can be tweaked so that the each image shows in the center or underneath.

If you click the image, you get to an alternate slideshow type view. This is also how you will see the alt text information.

There are some really great free viewers out there with a better layout. Unfortunately some of the ones I like the best are released under GPL. For that I won't be able to distribute them, but I would strongly consider producing a compatible ProductImages.aspx file for them. I am toying with that now.

[Jaz]

I like it. I think it is slicker looking that the jquery gallery, but from a product sales standpoint I still like the jquery one better because the descriptions are right under the image and the thumbnails are easier to see (I did enlarge the thumbnails on the jquery gallery) Anyhow, I am sure there are many who disagree with me. I could see myself using for parts of my site that are not a product page. Looks Good!

[Logan Rhodehamel]

I still like the jquery one better because the descriptions are right under the image and the thumbnails are easier to see (I did enlarge the thumbnails on the jquery gallery)

This is one of the reasons I preferred some other galleries. Here's another you might like:

http://tutorialdog.com/javascript-image ... ols-part-2

This library is provided under a share-alike license, so that means I can't distribute it to you or include it in our application. However I have attached a ProductImages.aspx file that has been modified to link to this viewer instead of our default viewer. Actually inside the attached ZIP I have also included installation instructions.

Note, this library has a small bug if your first image has an alt text. You will want to modify the js/imagegallery.js file. Down at the bottom, around line 88 it begins if(description).... This line should be replaced with this:

Code: Select all

		if(description) var desc = new Element('p').set('text', description.get('text')).inject(inspector);

The primary thing I don't like about this library is that the scroller images are too dark.

Which Jquery based image gallery do you like best?

[jmestep]

I only worked with the demo on the tutorialdog.com site, but I liked it better. The only thing I didn't like was no hover feature, but I imagine that is in the code. I think it would be a nice way to display the images in place of the main image instead of in a pop up.

[heinscott]

Here's a neat little image/video/imbedded page viewer that I just came across, called ShadowBox.
It's pretty cool, and free. Haven't started using it for my images yet, but, the tests I have done look very nice.
http://mjijackson.com/shadowbox/index.html

[Logan Rhodehamel]

This is the last sample I'm going to provide. I modified AbleCommerce to work with the jQuery based Galleria viewer. These galleries are not very difficult to swap out, probably an intermediate developer task. So if you find one you like, perhaps you (or someone you know) could take one of these samples here and modify it.

Galleria Site: http://devkick.com/lab/galleria/

[Logan Rhodehamel]

I think it would be a nice way to display the images in place of the main image instead of in a pop up.

I didn't attempt to go that route because the customization is more involved, while the popup viewer is just a single file to be swapped out. Perhaps someone will be inspired by these samples to make a modification like you describe.

[Jaz]

Yea, Galeria is what I have been using. It hink it has the best usability.

http://www.trickconcepts.com/Collapsibl ... 99C11.aspx

I just don't know if putting all my descriptions in the alt tags is going to hurt me with search engines.

[mazhar]

. I think it would be a nice way to display the images in place of the main image instead of in a pop up.

Have a look at this control
viewtopic.php?f=47&t=9026

[Jaz]

So I am using this galleria gallery for all my pages. I love the functionality, but I have a concern. I am now not using the description field for the products, or am using it very little because all my descriptions are in the captions for the photos. My concern is in the area of Search Engine Optimization. While this text is displayed on my page in a browser via Javascript, it is displayed to a search engine as an alt tag (and a bloated one for that matter) beacuse search engines do not read scripts. Does anyone know how this will effect rankings. I have HTML tags in the alt tags too. Will google look at a <p> .. </p> tag in an alt tag as a paragraph, or as somthing undesirable and confusing? Does anyone have a work around?

[Jaz]

here is another interesting Jquery gallery. It might be interesting for a related items area of the page:

http://jqueryfordesigners.com/demo/slider-gallery.html

[mazhar]

So I am using this galleria gallery for all my pages. I love the functionality, but I have a concern. I am now not using the description field for the products, or am using it very little because all my descriptions are in the captions for the photos. My concern is in the area of Search Engine Optimization. While this text is displayed on my page in a browser via Javascript, it is displayed to a search engine as an alt tag (and a bloated one for that matter) beacuse search engines do not read scripts. Does anyone know how this will effect rankings. I have HTML tags in the alt tags too. Will google look at a <p> .. </p> tag in an alt tag as a paragraph, or as somthing undesirable and confusing? Does anyone have a work around?

Well actually the gallery I posted in the forums makes use of the AltText property of ProductImage class of commercebuilder. It doesn't out puts the description in the alt property to HTML imae tag. If you take a look at the HTML output of you images you will see that the alt property of image show the name of your product. Also I think it is a better approach for SEO to put a meaning full information in the alt tag of image because we can say that search engine is blind, it can not see images and uses alt property of the img tag to gather information about the image contents. Here is the html out put of one of your images

Code: Select all

<div id="large" style=""><img alt="Collapsible Staff" src="http://www.trickconcepts.com/Assets/ProductImages/IMG_6358.jpg" style="border: 1px solid rgb(124, 121, 80);"/><div class="info"><p>We offer collapsible breakdown  staves for people on the move.  <br/><br/>These high quality collapsible  staves break down into three (3) separate pieces, making them easy to fit in  your backpack or gym bag.  Great for people  who ride motorcycles or take the subway! The 3 pieces slide together easily and  twist down tight to give you a completely rigid staff. We guarantee you will  not be able to tell the difference in rigidity between our breakdown staff and  a solid one-piece staff.  When disassembled, the ends work great as  torches. You get three tools in one! </p></div></div>

You can see that alt="Collapsible Staff" is alt text for the image which I think you have fixed for all images. It would be better to name the image properly to reflect what sort of information actually that image contains and use that info in the alt tag. For example if the image is about multiple wick dims then you can name it multiple wick dims so that alt attribute will contain proper information.

[mazhar]

One other possible workaround in case if you want to show your custom information in the alt tag is to provide some special character separated data in AltText property in admin for example
"This is alt text|here is the description"
where I used the pipe sign "|" for separation of the alt and description text. Now when showing the description and alt information first split the AltText info depending upon the "|" sign and then use first part for alt text of the image and second part for the description.

[Jaz]

Thanks. I see that you did this right. It looks like I have some work to do. For some reason when I switched to the Ablecommerce site I lost all my Google rankings and I just attributed it to the alt tags. I was ranked in that top 5 on a lot of pages and then the all disappeared. Maybe it is just one of those little glitches that Google has and it will be back in a week or so. It could be that all my URLs changed from the old site and it does not attribute my backlinks any more. I forwarded all the old pages, but maybe Google is not happy with the change in URL.

[kastnerd]

Thanks. I see that you did this right. It looks like I have some work to do. For some reason when I switched to the Ablecommerce site I lost all my Google rankings and I just attributed it to the alt tags. I was ranked in that top 5 on a lot of pages and then the all disappeared. Maybe it is just one of those little glitches that Google has and it will be back in a week or so. It could be that all my URLs changed from the old site and it does not attribute my backlinks any more. I forwarded all the old pages, but maybe Google is not happy with the change in URL.

what did you use the forward your old urls? Iv read that google likes old pages to be forwarded but only if you do it correctly.

[Jaz]

My server did the forward using a htaccess file I created.

[kastnerd]

Can i use 8 megapixel full rez photos and have them zoom able?

Are you using a 301 redirect?

[Jaz]

yes

RewriteRule tca-002-06.htm Boy-Beater-Tank-Top-P2C2.aspx [NC,R=301]

[kastnerd]

ideally i would have around 75x75 for thumb nail. and 400x400 for main image. Then a large image (possibly using a pop up) That would be 8 megapixle or so. With a zoom in and out feature.

[Jaz]

I recently upgraded to IE8 and this gallery no longer works. I have also noticed the IE8 has problems on other sites too. I am not banking on Microsoft to fixing this soon. Any Sugestions? Here is a link:

http://www.trickconcepts.com/Collapsibl ... 99C11.aspx

The small images show, but the large ones do not.

Thanks,

[SamsSteins]

Will this issue be addressed?

[mazhar]

Hi guys, I have checked the GalleriaImageViewer mod posted by Logan in this thread with IE8 and its working fine. The problem posted by Jaz is in fact related to following mod
viewtopic.php?f=47&t=9026
and I am able to reproduce it on IE. So it would be better to track further discussion in related thread. I am going to update thread with its fix.