|
JavaScript - Lightbox With Text Instead Of Image
i found a tutorial for doing the lightbox image viewer...and the link and demo is given below..
can someone tell me how do i replace the image with text in the lightbox....i mean when we hit on the image what shud i do to display text instead of image....hit on the image in the site and it will display an image.... http://www.dynamicdrive.com/dynamici...box2/index.htm thanx Similar TutorialsFirst off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image. Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated. Thanks! [CODE] <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> if (typeof $.ui == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" /> <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script> <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script> [CODE] Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/ When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up. I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again. Thanks to anyone who can help me with this! I would like to add a Lightbox like image display function to TinyMCE. What is a good approach in the regard, integration or extension? Thank for your input in advance. Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help! Code: <head>
<script type="text/javascript">
function replaceImg(path) {
var imgDest = document.getElementById('image');
var imgSrc = path;
imgDest.setAttribute("src", imgSrc);
}
</script>
</head>
<body>
<div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>
<div class="gallerypics"><?php
$counter = 0;
foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
{
$filename = basename($pathToThumb);
echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
$counter++;
}
?>
</body>
Hello there. I'm using Joomla 1.5 and VirtueMart for my e-shop. I've also installed a virtuemart template which loads mootools. Well in my virtuemart product detail pages, if you click the main image to make it enlarged using IE8 it will not open and return a JS error instead (found it using Firebug): http://goo.gl/6lQCV Code: Message: 'closeButton' is null or not an object Line: 21 Char: 63 Code: 0 URI: http://www.xxxxx.xxx/media/system/js/mootools.js I'm not sure but I think that if I fix the JS errors on these pages the problem will be solved and the images will open normally. Note that on all other browsers it works fine (Firefox, Chrome, Safari, IE9). The page returns some other errors too but they're the whole time there. I think there's a conflict caused by all the JS libraries loaded by my Plugins (System - RokBox & YOOeffects), Joomla template, VirtueMart & VirtueMart template (jquery and mootools are both loaded). Thanks in advance Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. All, I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: http://www.photoworks.com/ You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here. Thanks for any help in advance. Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides. this is the code im using: Code:
// Javascript
<script language="javascript">
$(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000);
$("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
});
</script>
// CSS
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
// HTML
<a id="show-panel" href="#" class="small">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#" class="small">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ Figured it out... admin can delete.
I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script>
<script type="text/javascript">
confirmBox.setText("This is a test"); //Sets the text to show in the box
confirmBox.setTrueText("I can see it"); // sets the text on the return true button
confirmBox.setFalseText("I can't see it"); // sets the text on the return false button
confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked
confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked
confirmBox.show(); // Show the confirmBox
</script>
I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7. Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work. Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps) Thanks. Code: <?
session_start();
if(!session_is_registered(myusername)){
header("location:index.php");
}
?>
<?php
//users data query
$sesusername = $_SESSION['myusername'];
$sespassword = $_SESSION['mypassword'];
include_once("scripts/connect.php");
$memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'");
while($row = mysql_fetch_assoc($memberquery)){
$id = $row['id'];
$photo = $row['profile_picture'];
$name = $row['name'];
$username = $row['username'];
$joined = $row['date_joined'];
$password = $row['password'];
$email = $row['email'];
$freinds = $row['friends'];
}
?>
<?php
//friends data
$friendsquery = mysql_query("SELECT * FROM members");
while($row = mysql_fetch_assoc($friendsquery)){
$user = $row['name'];
$userpic = $row['profile_picture'];
$id = $row['id'];
{ $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ;
}
}
?>
<DOCTYPE HTML>
<html>
<head>
<title>Dead psycho | Friends</title>
<style type="text/css">
#friend_container{
display:none;
background:#000000;
opacity:0.7;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#friends_content{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
max-height: 400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #a11e22;
z-index:1001;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Overflow: scroll;
}
a{ color:#a11e22 ;}
#friend{height:150px;
width:150px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#open_friends").click(function(){
$("#friend_container, #friends_content").fadeIn(300);
})
$("a#close_friends").click(function(){
$("#friend_container, #friends_content").fadeOut(300);
})
})
</script>
<?php include_once("menu.php"); ?>
</head>
<body>
<div id="container">
<div id="leftside">
<?php require_once("sidebar_left.php"); ?>
</div>
<div id="content">
<a id="open_friends" href="#"><b>All friends</b></a>
<div id="friends_content">
<h2><center>Friends</center></h2>
<hr width="90%" color="#a11e22"/>
<?php echo "$friend"; ?> <br/>
<b><center><a id="close_friends" href="#">Close</a></center></b>
</div>
<div id="friend_container"> </div></div>
</div>
<div id="footer" align="justify">
<?php include_once("scripts/copy.php"); ?>
</div>
</body>
</html>
I need help i have "installed" everything for lightbox and it runs but how 1 can i make it to click on a image and then open the light box and how can i get it over the frame?! Please and thanks... If you don`t know what i mean check out rebel-renee.com - Media-Lounge galerie... |
|||||||