2 Jquery plugins på samme side
Hej eksperterJeg er begyndt at arbejde kun med jquery plugins (ellers problemer, se mit tidligere spg. http://www.eksperten.dk/spm/968516), men dette giver også problemer ;-)
På en side vil jeg gerne både kunne vise et stort billede ved klik på thumb-billede (http://lokeshdhakar.com/projects/lightbox2/), og samtidig mulighed for load af anden side ved klik på link (http://jquerytools.org/demos/overlay/external.html). Dette vil bare ikke virke sammen. Her testet med denne kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
</head>
<body>
<a href="/upload/admin/st-erhverv3.jpg" rel="lightbox"><img style="border-radius: 9px; -moz-border-radius:9px; -webkit-border-radius:9px; -khtml-border-radius: 9px;" src="/upload/admin/st-erhverv3.jpg"></a>
<script src="/js/jquery.tools.min.js"></script>
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkgrey',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
<style>
/* the overlayed element */
.apple_overlay {
/* initially overlay is hidden */
display:none;
/* growing background image */
background-image:url(/billeder/overlaywhite.png);
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;
/* some padding to layout nested elements nicely */
padding:40px;
/* a little styling */
font-size:11px;
}
/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image:url(/billeder/overlayclose.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/billeder/overlaytransparent.png);
color:#efefef;
height:490px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:490px;
overflow-y:auto;
}
.opretindlaeg {
float: left;
width: 160px;
padding: 5px;
margin: 0px;
background-color: #474646;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-khtml-border-radius: 9px;
font-family: Arial;
font-size: 12px;
text-align: center;
color: #FFF;
}
</style>
<a href="http://www.eksperten.dk" rel="#overlay" style="text-decoration:none">
<div class="opretindlaeg">Skriv en kommentar</div>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<div style="clear: both; height: 10px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #e2e2e2; margin-bottom: 10px;"></div>
</body>
</html>
Skulle det ikke være muligt, da begge er Jquery plugins????
På forhånd tak.
