Hey guys, attempting to replicate something I saw on http://www.ambientlounge.co.uk - if you hover over their bean bag navigation link, you’ll see they have an image that appears as you move your mouse over each different product.
I am attempting to create something similar right now. On Ambient Lounge, they’ve done the following:
- attached a unique ID to each
- element, which is the name of the product without spaces (ex. bean-bag-1)
- increased the navigation column count to allow space for the images
- wrote a simple jQuery script to change the image on rollover
I don’t need anything quite as intricate as this; I just need to load the Category image (already enabled and uploaded to both of my targeted categories) to the right of my navigation bars, which have already been expanded from 3 columns to 5 columns to account for this extra space. My issue is that I am using the following code to load in the images without any luck:
<br />
{if $category_data.main_pair}<br />
<div class="categories-image" style="float:right; height:auto; width:150px;"><br />
{include file="common/image.tpl" show_detailed_link=true images=$category_data.main_pair object_type="detailed_category" no_ids=true class="cm-thumbnails" show_thumbnail="Y" image_width=$settings.Thumbnails.category_details_thumbnail_width image_height=$settings.Thumbnails.category_details_thumbnail_height}<br />
</div><br />
{/if}<br />
```<br />
<br />
If I manually enter the link for an image, it works without issue, so it must be something with this script... any ideas?? <img src="upload://rA9Qa8gnUPZzRZRdI8kt3dpjkrs.png" class="bbc_emoticon" alt=":)">