PDA

View Full Version : CSS Popup Image Viewer



Mickmac
01-25-2009, 02:41 PM
1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P460/

3) Describe problem: I am not sure where to place the code. In the example it describes the first section of code as "The CSS:" and the 2nd section as "The HTML:" but does not explain where to place the code.
Within the "Admin" of my website there are 3 separate pages of CSS. One is base.css, one is cart.css, and the 3rd one is page.css.
To place code within the "head" tags I use theme.liquid, and if I want to place a banner or image or text on the home page I use index.liquid
Any idea where I should put the codes ?

Thank you, Mickmac

Nile
01-25-2009, 03:18 PM
"The CSS" section is placed in the <head> part of the document.
"The HTML" part is placed where you want the effect to display(somewhere in the <body> part of the document).

Other than that we need the following.
Please post a link to the page on your site that contains the problematic script so we can check it out.
Please include your code so that we can take a look at it, we can't do much without it.

Mickmac
01-25-2009, 03:39 PM
Thanks Nile,

I will try it, and if I have any problems will post my webpage and code.

Mickmac

Mickmac
01-26-2009, 02:59 AM
Hi Nile,

Well, I put this code, the CSS in the "head" section :

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

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

}

</style>

and I put the HTML in index.liquid, which is where you place code when you want to display something on the homepage :

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

You can see the result at the very bottom of this page, just above the footer - http://lannacharm.myshopify.com/

Just 2 text links, no images. Also, for some reason they are appearing at the very top left corner of the screen, off the actual page.

I think one of the problems is where I put the code. The "head" and "body" sections are both in theme.liquid. If I put the HTML in the body section I have no control over where the image is displayed. I have to put the HTML code in another page, called index.liquid
My website is a Shopify site.

Hope this makes sense to you.

Mickmac

Nile
01-26-2009, 03:03 AM
Your images don't exist, replace the highlighted with he new images:


<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

Mickmac
01-26-2009, 04:36 AM
Thanks Nile,

I fixed it and now it works fine. I will play around with it now and see if I can have multiple images on a page together. When I tried to do it with Javascript I could only get 1 to work at a time. But I think this CSS will do the trick.
Thanks again for your help, and for a great forum.

Mickmac

Nile
01-26-2009, 10:28 PM
I'm glad to help you mickmac. Your welcome. :D