Pop Up Image - Controlling Image Size

[dorichcss]

1) Script Title:
Pop up image viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
3) Describe problem:
This question has to do with variants of the original css. I have only rudimentary knowledge of CSS and so would appreciate some pointers.

I was interested in controlling the size of the image so I experimented with adding a simple class to the two image elements.

In the case of the smaller image this appeared to work as with the following:

html

img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image"/>
css

img.dim {
height: 37px;
width: 60px;
}
This appears to work as expected, although whether its by luck or design I'm not sure.

Then I tried the same trick for the hover image, thus:
html

<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" />
<br />US market is Shrinking</span></a>

css

img.large {
height: 124px;
width: 200px;
}

However, this doesn't work and the larger image appears in the original size.

I'd appreciate it if anyone can point out why this is not working, if there is a way to fix it, OR if there are some bad practices here that I should avoid.

Thx.

RB

[rangana]

I'm not certain about this, I can't also find the list on the src naming conventions. Maybe your image name, having brackets, causes an error ;)

Why not just specify your image width and height in the img tag :)


<img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image" width="60px" height="37px"/>



<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" width="200px" height="124px"/>
<br />US market is Shrinking</span></a>


...Or you may wish to apply inline CSS ;)

...If nothing works still, could you show us a live page :)

[codeexploiter]

Try to give the width and height in the following class and see what happens



.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
width: 200px;
height: 124px
}

[dorichcss]

Try to give the width and height in the following class and see what happens



.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
width: 200px;
height: 124px
}


Thanks for the suggestion.

This approach has the effect of changing the background box but the image stays the same size. See this page for example, hover the thumbnail graphic:
[URL="http://demo.expressionengine.com/uFgJLgdDKF/index.php/tutorial/bullet_list/[/URL]

It appears that you have to connect the dimensions of the image directly with the src definition.

Thx

[dorichcss]

I'm not certain about this, I can't also find the list on the src naming conventions. Maybe your image name, having brackets, causes an error ;)

Thanks for the thought.
This is being used with "Expression Engine" and the image reference is parsed so if that is the problem I have no control over it.




Why not just specify your image width and height in the img tag :)


<img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image" width="60px" height="37px"/>



<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" width="200px" height="124px"/>
<br />US market is Shrinking</span></a>


...Or you may wish to apply inline CSS ;)

...If nothing works still, could you show us a live page :)

Thanks for your response.

I thought I read that putting dimensions directly into src was being deprecated for html 4 onwards but now I can't find the reference so perhaps I'm incorrect on that point. So, in part, I was trying to follow what I thought were good practices.

Also I was using the "class" approach because I expect to do this with many images and I thought it would cut down on the amount of editing.

Your suggestion works, thanks.
The original can be seen at:
http://demo.expressionengine.com/uFgJLgdDKF/index.php/tutorial/bullet_list2/