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/cs...e-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" /><img src="media/tree.jpg" /> Simply beautiful.</a>

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

 
 

<a class="thumbnail" href="#thumb">Dynamic Drive<img src="media/dynamicdrive.gif" /> Dynamic Drive</a> 
<a class="thumbnail" href="#thumb">Zoka Coffee<img src="media/zoka.gif" /> Zoka Coffee</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:

Code:

<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.

Thread: CSS Popup Image Viewer

Thread Tools

Search Thread

CSS Popup Image Viewer

Bookmarks

Bookmarks

Posting Permissions