PDA

View Full Version : CSS Popup Image Viewer



Dazza30
12-11-2008, 01:47 PM
1) Script Title: CSS Popup Image Viewer


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

3) Describe problem: I need to be able to add a buy now link and a more offers link to the pop up image text, so far ive tried but with no luck can anyone assist?

Snookerman
12-11-2008, 02:23 PM
That is because you cannot have an anchor inside another anchor. Try replacing the anchor with a div container:

<div class="thumbnail">Hover to view image
<span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br />
Image Text <a href="http://www.google.com">Google</a></span>
</div>

Dazza30
12-11-2008, 04:00 PM
That is because you cannot have an anchor inside another anchor. Try replacing the anchor with a div container:

<div class="thumbnail">Hover to view image
<span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /><br />
Image Text <a href="http://www.google.com">Google</a></span>
</div>

Thanks for your assistance Snookerman.

But i still have a problem, when i change the anchor to a DIV it wont validate because im coding in XHTML 1.0 Transitional and the class="thumbnail" is not allowed to be placed within a DIV tag.

I went a head an tried it anyway, but instead of lining up in three rows of three the images displayed in a centered single row.

Snookerman
12-11-2008, 04:13 PM
But i still have a problem, when i change the anchor to a DIV it wont validate because im coding in XHTML 1.0 Transitional and the class="thumbnail" is not allowed to be placed within a DIV tag.
What? You can place any class in a div tag. You must have made some other mistake. Here is the code in a xhtml 1.0 transitional page, go ahead and validate it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="thumbnail">Hover to view image <span><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /><br />
Image Text <a href="http://www.google.com">Google</a></span> </div>
</body>
</html>

Please post a link to your site, or attach your code, and I will try to help you validate it.

Dazza30
12-11-2008, 04:29 PM
I highlighted the wrong part of the code.

Heres the pop up image viewer html im working with and the offending code highlighted in red, which wont validate when i change the a tag to a div.

<div class="style24" style="left: 0px; top: 10px">

<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br/>
<br/>
<a class="thumbnail" ><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br/>
<br/>
<a class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<a class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></a>

<br />


</div>

Snookerman
12-11-2008, 04:30 PM
Could you post the code after you have changed it, i.e. the one that won't validate?

Dazza30
12-11-2008, 04:39 PM
This time i changed the a tags to divs and highlighted the offending code in red again, but i also added the hyper link where i need it to go.

<div class="style24" style="left: 0px; top: 10px">

<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />Some text<a href="www.myhomepage.com" target="_blank">some text</a></span></div>

<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br/>
<br/>
<div class="thumbnail" ><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br/>
<br/>
<div class="thumbnail" href="#thumb"><img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<div class="thumbnail" href="#thumb">
<img alt="" src="images6/6500slps3gta.jpg"/><span><img alt="" src="images6/6500slps3gta.jpg" width="329" height="218" /><br />some text</span></div>

<br />


</div>

Snookerman
12-11-2008, 04:41 PM
Your problem is the part you marked in red. You cannot have a href value for div containers, only for anchors.

Dazza30
12-11-2008, 04:48 PM
Your problem is the part you marked in red. You cannot have a href value for div containers, only for anchors.

Problem is though the href part of the code is suppost to be there, if i cant change the a tag and get the images to dispaly properly im going to have to scrap it.

Snookerman
12-11-2008, 05:14 PM
Problem is though the href part of the code is suppost to be there
Are you sure? I can't see any reason for why it should be there. Have you tried removing it to see what happens?

Dazza30
12-11-2008, 10:03 PM
Are you sure? I can't see any reason for why it should be there. Have you tried removing it to see what happens?

I removed 1 of them and it seems ok, but this doesnt solve the problem that happens when you change the A tag to a div tag, the whole layout changes.


I must admit ive been looking around the net and css drive for a solution and the nearest ive found is here http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P290/ scroll down to the comments and read the third one down.

Also here's a link to a webpage with it nearly how i need it, http://www.moodtubes.com/ the popoup looks great but i need to be able to add two links to the text.

Im starting to think its not possible though.

Snookerman
12-11-2008, 10:34 PM
when you change the A tag to a div tag, the whole layout changes.
What exactly happens, how does the layout change? I'm sure this can be easily fixed with css.

Dazza30
12-12-2008, 10:21 AM
What exactly happens, how does the layout change? I'm sure this can be easily fixed with css.

The thumbnails appear in a single vertical line instead of two rows of three.

Snookerman
12-12-2008, 02:50 PM
You could try this in your css:

.thumbnail {
display:inline;
}

It would be much easier to help you if you could please post a link to your site or attach the entire code you are using.

Dazza30
12-12-2008, 08:14 PM
You could try this in your css:

.thumbnail {
display:inline;
}

It would be much easier to help you if you could please post a link to your site or attach the entire code you are using.

I solved the problem.

I was looking at old projects ive worked on since 2006 and came across a solution its javascript.

First i placed this in the head of my page

<script
language="javascript"type="text/javascript"src="SwapImage.js"></script>

Then theres the swap image script that i reference externaly, its been about two years since i last looked at it, im sure it can do more than just allow me to open a new window etc


function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//
function FP_openNewWindow(w,h,nav,loc,sts,menu,scroll,resize,name,url) {//v1.0
var windowProperties=''; if(nav==false) windowProperties+='toolbar=no,'; else
windowProperties+='toolbar=yes,'; if(loc==false) windowProperties+='location=no,';
else windowProperties+='location=yes,'; if(sts==false) windowProperties+='status=no,';
else windowProperties+='status=yes,'; if(menu==false) windowProperties+='menubar=no,';
else windowProperties+='menubar=yes,'; if(scroll==false) windowProperties+='scrollbars=no,';
else windowProperties+='scrollbars=yes,'; if(resize==false) windowProperties+='resizable=no,';
else windowProperties+='resizable=yes,'; if(w!="") windowProperties+='width='+w+',';
if(h!="") windowProperties+='height='+h; if(windowProperties!="") {
if( windowProperties.charAt(windowProperties.length-1)==',')
windowProperties=windowProperties.substring(0,windowProperties.length-1); }
window.open(url,name,windowProperties);
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

Then to get my link i placed two different codes dependeng on wether i want to open a new window or not.

Look at the onclick event each is different and highlighted blue.

OPENS NEW WINDOW

<img style="border: 0" id="img26" src="images/buttonF4.jpg" height="13" width="63" alt="Product description here" onclick="FP_openNewWindow('825', '800', false, false, false, false, true, true, 'Product description here', /*href*/' Place link here ')" title=" Description here ">

OPENS LINK IN THE SAME WINDOW

<img style="border: 0" id="img72" src="images3/buttonC.jpg" height="13" width="63" alt="Product description here" onclick="FP_goToURL(/*href*/' Place link here ')"/>

Thats all there is to it, i think.