[SOLVED] Product.tpl ---> Additional Images POSITION!

[robkwal]

Hi all,

I am looking to achieve what can be seen HERE, the additional images are to left hand of the side of the main image as a posed to the original below the main image!? I also don't want the scroll bar to be active!

Thanks in advance,

Rob

[robkwal]

Is anyone able to help with this?

[razaro]

It is not to difficult.
There are more properties but I will write just what you need to add.

#primary_block #pb-right-column {
position:relative;
}

then

#views_block {
left:10px;
position:absolute;
top:10px;
}

Then you need to change / delete some code in product.tpl in thumbnail section.
Delete/comment out lines with

{if count($images) > 3}

that holds arrows .
And change

></pre>
<ul>

to

></pre>
<ul style="width:80px;">

or
just

></pre>
<ul>

and add style to global.css

ul#thumbs_list_frame{width: 80px}

I think that is it, maybe you need to adjust some widths but generally these are steps.

[robkwal]

Thanks for the reply... I will follow what you have provided, then update you on how its gone.

Reagrds,

Rob

[robkwal]

Worked a treat! Thanks very much for your help!!!

[robkwal]

Hi razaro,

I have just came across a little problem nothing major! What I now wanted to do is add a border to the right hand side of the #view container, but for some reason even though the width is set to 40px it seems to put the border about 205px in so in effect over the top of the main image! Instead of acting as a divider. If you could help again would be great!

Kind Regards,

Rob

[razaro]

I am not sure if I understood you correctly but try this

#thumbs_list {
border-right:5px solid white;
float:left;
overflow:hidden;
width:80px;
}

global.css (line 871)

If this is not it add some screen-shots .

[robkwal]

You got it, I was adding the border to the #views!!! You are a great asset to this forum! Thanks!!!!!!!! :-)

[robkwal]

Hi,

Thought this was solved, then just checked it out on all the browsers to make sure it was rendering similar on all to find that internet explorer doesn't show the additional images at all. Just what looks to be very small bullet points!

I have attached the explorer screen shot and it rendering correctly on chrome!

Here is also the code for my product template if it helps:


/* product.tpl */
#primary_block #pb-right-column {
position:relative;
width: 550px;/*460 310*/
float: left;
}
#primary_block #image-block {
padding-left:50px;
height: 450px;
width: 450px
}

#primary_block #image-block img#bigpic {
cursor: pointer;
height: 450px;
width: 450px
}
#primary_block ul#usefull_link_block {
list-style-type: none;
margin-top: 1em
}
#primary_block ul#usefull_link_block li { margin: 0.5em 1em 0.5em 0; display: block }
#primary_block ul#usefull_link_block li a,
#primary_block ul#usefull_link_block span.span_link,
#primary_block ul#usefull_link_block span.span_link:hover {
text-decoration: none;
color: #76839b;
font-size: 0.9em;
background: white url('../img/bullet_alt.jpg') no-repeat top left;
padding-left: 15px;
height: 15px
}
#primary_block #pb-left-column {
float: left;
width: 390px /*530*/
}
#pb-left-column h2 {

}
#primary_block #short_description_block {
border-bottom:1px dotted #D8D8D8;
margin-bottom: 1.5em
}
#primary_block #color_picker p {
margin-bottom: 0.4em;
padding: 0
}
#color_picker h3 {
font-size:12px;
font-weight:bold;
color:#000000;
text-transform:uppercase;
}
#primary_block #color_picker {


}
#primary_block #color_to_pick_list li {
display: inline;
float: left;
margin: 0 0.4em 0.4em 0
}
#primary_block a.color_pick {
display: block;
width: 20px;
height: 15px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
cursor: pointer
}
#primary_block a.color_pick:hover { }
#primary_block a#color_all { cursor: pointer }
#primary_block #image-block img#bigpic.jqzoom {
cursor: crosshair;
position: relative
}
#primary_block p.buttons_bottom_block { margin: 0 }
#primary_block p.buttons_bottom_block a,
#primary_block p.buttons_bottom_block input { margin: 0.9em auto 0 auto }
#primary_block #short_description_content { margin-bottom: 0.5em }
#primary_block form#buy_block {
color: #000000;
border-bottom:1px dotted #D8D8D8;
padding-bottom:1em;
}
#primary_block form#buy_block p {
padding: 0;
margin-top: 0
}
#buy_block h3 {
font-size:12px;
font-weight:bold;
color:#000000;
text-transform:uppercase;
}
#primary_block form#buy_block img.on_sale_img { float: left }
#primary_block form#buy_block span.on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
float: right
}
#primary_block form#buy_block span.discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
float: right
}
#primary_block form#buy_block span.our_price_display { float: left }
#primary_block form#buy_block span#availability_label {
float: left;
margin-right: 1em
}
#primary_block form#buy_block label { font-weight:bold; text-transform:uppercase; font-size:12px; padding-top:3px;text-align: left;margin-right:10px; }
#primary_block form#buy_block label,#primary_block form#buy_block select {
display: block;

float: left
}
#primary_block div#attributes p, #quantity_wanted_p {
clear: left;
height: 2em
}


/* views block */
#views_block {
/*margin: 0 auto;
width: 40px;*/
left:0px;
position:absolute;
top:0px;
}
#thumbs_list {
/*overflow: hidden;*/
border-right:1px dotted #D8D8D8;
float: left;
width: 49px; /*240*/
}
ul#thumbs_list_frame{width: 40px; border-right:1px dotted #D8D8D8;}
#thumbs_list ul {
padding-left: 0;
list-style-type: none;
margin-top: 5px
}
#thumbs_list li {

cursor: pointer;
width: 40px;
height: 50px
}
#view_scroll_left, #view_scroll_right {
background: url('../img/thumbs_left.gif') no-repeat center;
text-indent: -3000px;
width: 9px;
height: 18px;
float: left;
margin-top: 30px;
padding-right: 4px;
padding-left: 4px
}
#view_scroll_right { background-image: url('../img/thumbs_right.gif') }
span.view_scroll_spacer {
float: left;
width: 17px;
height: 80px
}

[robkwal]

Just a quick note, it would seem that what I believed to be bullet points to begin with are actually the images just very very small for some reason. Do you no what might be causing this and how to rectify it?

[robkwal]

I have now managed to solve this, when I made the suggested changes earlier I also changed the height="{$mediumSize.height}" width="{$mediumSize.width}" to height="{$smallSize.height}" width="{$smallSize.width}" so decided to change back to the original height="{$mediumSize.height}" width="{$mediumSize.width}" and this seems to have corrected the problem with internet explorer!!!

[razaro]

I saw similar problem in this topic it is also reported in bug tracker, so check that out also.

Only difference in your case is that $smallSize variable is not defined in product.tpl so it had same effect.

And I'll sent you PM about some other issues with your website :-)