|
JavaScript - Links Not Working In Ie7/opera, And Shadowbox/lightbox Not Working
Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. Similar TutorialsHi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell You can view a test page here http://www.spmcreative.co.uk/patrickedward/gallery.html (only the first thumbnail is clickable) I have attached some code below, please let me know if you need to see any more, Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
}
a:link {
color: #999;
text-decoration: none;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>
<body>
<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />
</a>
</div>
<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>
</div> <!--end of header-->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div>
</div> <!--end of banner-->
<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>
</div>
Thanks, Simon When i click on an image, it just opens in a new tab, lightbox doesn't work?! PHP Code: $jq_add_div_strings = ''; $jq_div_classes_csv = ''; $counter = 0; //startarray $bikearray = array(); //$query = "SELECT * FROM wmb_members ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; //$query = "SELECT * FROM wmb_members LEFT JOIN wmb_pics ON wmb_pics.UserID=wmb_members.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $query = "SELECT M.*, P.picid, P.filename " . " FROM ( SELECT * " . " FROM wmb_members " . " ORDER BY rsDateTaken DESC, UserID ASC " . " LIMIT " . $offset . "," . $rowsPerPage . " ) AS M " . " LEFT JOIN wmb_pics AS P " . " ON M.UserID = P.UserID " . " ORDER BY M.rsDateTaken DESC, M.userID ASC, P.picid ASC;"; //$query = "SELECT wmb_members.*, wmb_pics.* FROM wmb_members INNER JOIN wmb_members ON wmb_members.UserID=wmb_pics.UserID ORDER BY rsDatetaken DESC LIMIT $offset, $rowsPerPage"; $result = mysql_query($query); $num_rows = mysql_num_rows($result); //echo "DEBUG SQL: " . $query . "<HR>"; //echo "DEBUG: query returned " . $num_rows . " rows<hr>\n"; // remember the UserID of the prior row ... no prior row to start, so blank: $priorid = ""; while ($row = mysql_fetch_assoc($result)) { // get the UserID for the current row in the results $curid = $row['UserID']; // if not the same as the prior row, then create a new set of data in the bikearray: if ( $curid != $priorid ) { // I'm guessing that this stuff goes he $jq_add_div_strings .= "animatedcollapse.addDiv('jason$counter', 'hide=1', 'fade=1,height=180px')\n"; $jq_div_classes_csv .= "'jason$counter',"; // on firmer footing here...this should be right: // store main data array $bikearray[$curid]['UserID'] = $curid; $bikearray[$curid]['rsBikeman'] = $row['rsBikeman']; $bikearray[$curid]['rsBikemod'] = $row['rsBikemod']; $bikearray[$curid]['rsBikeyear'] = $row['rsBikeyear']; $bikearray[$curid]['rsBikecolor'] = $row['rsBikecolor']; $bikearray[$curid]['rsDatetaken'] = $row['rsDatetaken']; $bikearray[$curid]['rsLocation'] = $row['rsLocation']; $bikearray[$curid]['rsOtherinfo'] = $row['rsOtherinfo']; $bikearray[$curid]['rsLocpostcode'] = $row['rsLocpostcode']; $bikearray[$curid]['rsLocked'] = $row['rsLocked']; $bikearray[$curid]['lockType'] = $row['lockType']; $bikearray[$curid]['frontSus'] = $row['frontSus']; $bikearray[$curid]['rearSus'] = $row['rearSus']; $bikearray[$curid]['frontLight'] = $row['frontLight']; $bikearray[$curid]['rearLight'] = $row['rearLight']; $bikearray[$curid]['bikeBell'] = $row['bikeBell']; $bikearray[$curid]['bikeBasket'] = $row['bikeBasket']; $bikearray[$curid]['bikeBag'] = $row['bikeBag']; $bikearray[$curid]['rsUser'] = $row['rsUser']; $bikearray[$curid]['rsEmail'] = $row['rsEmail']; // How do you specify an empty array in PHP?? $bikearray[$curid]['pictures'] = array(); // This is how many pictures there are for current UserID: $piccount = 0; $counter++; // and change priorid for the match test at top of loop $priorid = $curid; } // then regardless if new userid or a repeated userid... // see if this record has a valid (non null, non blank) filename: $pic = $row['filename']; if(!empty($pic)) { // yes...a valid filename...so add it to the array $bikearray[$curid]['pictures'][$piccount] = $pic; // and count it ++$piccount; } } $jq_div_classes_csv = rtrim($jq_div_classes_csv,","); $bikearray_html = array(); $i = 0; foreach ($bikearray as $id=>$DETAILS) { @$bikearray_html[$i] .= "<div id=\"pubholder\" class=\"wrap\">"; $bikearray_html[$i] .= "<div class=\"entry_header\">"; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.show('jason$i')\" >show more details ></a> "; $bikearray_html[$i] .= "<a href=\"javascript:animatedcollapse.hide('jason$i')\" >hide ^</a>"; $bikearray_html[$i] .= "<div><b>".$DETAILS['rsUser']."'s ".$DETAILS['rsBikeman']." ".$DETAILS['rsBikemod']."</b> was taken from <b>".$DETAILS['rsLocation']."</b> on <b>".$DETAILS['rsDatetaken']."</b></div>"; $bikearray_html[$i] .= "<div id=\"jason$i\">\n"; $bikearray_html[$i] .= "</br></br>"; $bikearray_html[$i] .= "<b>Owners email:</b> <a href=\"mailto:".$DETAILS['rsEmail']."\"> ".$DETAILS['rsEmail']."</a></br>"; $bikearray_html[$i] .= "<b>Bike year:</b> ".$DETAILS['rsBikeyear']." </br>"; $bikearray_html[$i] .= "<b>Bike color:</b> ".$DETAILS['rsBikecolor']." </br>"; $bikearray_html[$i] .= "<b>Locked:</b> ".$DETAILS['rsLocked']." </br>"; $bikearray_html[$i] .= "<b>Lock type:</b> ".$DETAILS['lockType']." </br>"; $bikearray_html[$i] .= "<b>additional extras:</b></br> <i> Front suspension: ".$DETAILS['frontSus']."</br> Rear suspension: ".$DETAILS['rearSus']."</br> Front Light: ".$DETAILS['frontLight']."</br> Rear Light: ".$DETAILS['rearLight']."</br> Bell: ".$DETAILS['bikeBell']."</br> Basket: ".$DETAILS['bikeBasket']."</br> Bag: ".$DETAILS['bikeBag']."</i></br>"; $bikearray_html[$i] .= "<b>Other info:</b> ".$DETAILS['rsOtherinfo']." </br>"; if(!empty($DETAILS['pictures'])){ foreach($DETAILS['pictures'] as $piccount => $pic){ [B]$bikearray_html[$i] .= "<a href=\"upload/".$pic."\" rel=\"lightbox[bikes]\" border=\"0\"><img src=\"upload/".$pic."\" height=\"75\" width=\"100\" \></a>[/B] "; // do what you want here } }else{ // no picture for this user } $bikearray_html[$i] .= "</br>"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $bikearray_html[$i] .= "</div>\n"; $i++; } mysql_close($link); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>Stolen Bikes, mountain bikes, bmx bikes, Other cycles and bicycles in the UK</title> <meta name="description" content="Website to help people get their stolen bikes back" /> <meta name="keywords" content="stolen, thief, mountain bike, bicycle, UK, nicked, MTB" /> <meta name="Content-Language" content="en-gb" /> <meta name="robots" content="FOLLOW,INDEX" /> <meta name="revisit-after" content="2 days" /> <meta name="copyright" content="www.wheresmybike.co.uk" /> <meta name="author" content="www.mutecms.com - Professional web site design in the south uk, worthing, brighton" /> <meta name="distribution" content="Global" /> <meta name="resource-type" content="document" /> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); </script> [B]<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />[/B] <link rel="stylesheet" type="text/css" href="css/reset-style.css" /> <link rel="stylesheet" type="text/css" href="css/sitestyle.css" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> [B]<script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/external.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>[/B] <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/jva.js"></script> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="animatedcollapse.js"></script> <script type="text/javascript"> animatedcollapse.init() <?php echo $jq_add_div_strings; ?> </script> </head> <body> <div id="doc"> <div id="hd"> <h1>Where's my bike?</h1> <div class="manbike"></div> <div class="cctv"></div> <ul> <li><a href="default.php" title="Homepage and News">home</a></li> <li><a href="bike.html" title="Featured Bike">the bike</a></li> <li><a href="thieves.html" title="Featured Thief">the thief</a></li> <li><a href="cctv.html" title="CCTV Footage">the CCTV</a></li> <li><a href="signup.php" title="Sign Up">sign up</a></li> <li><a href="stolen-bikes.php" title="Stolen Bikes">stolen bikes</a></li> <li><a href="login.php" title="Login">login</a></li> <li><a href="yoursay.php" title="Have your say">your say</a></li> <li><a href="forum.html" title="Forum">forum</a></li> </ul> </div> <div id="bd"> <div class="yui-g"> <div class="topcontent"> </div> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <a href="javascript:animatedcollapse.show([<?php echo $jq_div_classes_csv; ?>])">show all<img src="images/down.gif" border="0" /></a> <a href="javascript:animatedcollapse.hide([<?php echo $jq_div_classes_csv; ?>])"><img src="images/up.gif" border="0" />hide all</a> <?php foreach ($bikearray_html as $html) echo $html; ?> <?php echo $first.$prev; ?> Showing page <strong><?php echo $pageNum;?></strong> of <strong><?php echo $maxPage;?></strong> pages <?php echo $next.$last; ?> </div> </div> <div id="ft">Site created by: <a href="http://www.jbiddulph.com">jbiddulph.com</a></div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-2434589-16"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> http://www.wheresmybike.co.uk/stolen-bikes.php?page=2 Hi everyone, My page with my slideshow (with lightbox integrated) is up and running fine on browsers like Firefox, IE, and Google Chrome... But Safari doesn't even show the slideshow. www.bobbivanstudio.com/work.php Any ideas why? Thanks in advance! Ok, I've determined that my problem wasn't in the script itself, but in the fact that Opera 10 Beta 2 apparently does not recognize the "onload" attribute of the body tag. Is there a way to work around this?
Hi, i have recently just built a simple website and have started to add some added editions one being the lightbox. i am using dreamweaver cs3 and on a mac laptop, so in safari it works brillaint no problems what so ever. but as soon as you load it in internet explorer the light box opens but it displays a 404 error on the first image of every gallery, on every different profile? if anyone would help that would be fantastic http://www.goodeveningladies.co.uk/profiles.co.uk Code: <a href="../images/lrgimages/adam/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<img src="../images/Adam.jpg" alt="" width="450" height="200" align="middle" />
<a href="../images/lrgimages/adam/1.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/2.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/3.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/4.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/adam/5.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]">
<a href="../images/lrgimages/AdamLrg.jpg" title="Call us today on 07792530515!" rel="sexylightbox[Goodeveningladies.co.uk - Adam]"></a>
here is a section of the coding that i use for each image obviously the names have changed and the directories have changed for each profile. any help would be much appreciated. Hi, I've made a web based tool that times how long a web page takes to load in an iframe and today I redesigned it but now it has issues. When I load it in Chrome and Opera the new version works fine but in FF 3.6 and IE 8 only the footer area is displayed. I have added the links below - You'll be able to access the code via your browser's "View page Source" option. URLs: New test (With problem): http://browserspeedtest.camerongray....net/version31/ Old test (Works perfectly): http://browserspeedtest.co.cc Any help is greatly appreciated! Cameron Gray I'm a beginner. My links are not working in this js script. The menu renders properly, but nothing happens when I click the link. Thanks, Ed [code] <HTMl> <head> <title>JavaScript Example</title> <script language="JavaScript"> // Create array to hold four URLs; var dest = new Array(4); dest[0] = window.location.href; dest[1] = "http://www.journey.maryanngoble.com/"; dest[2] = "http://www.facebook.com/bluegrasscreative/"; dest[3] = "http://www.campbellsville.edu"; function go(d) { // Change location of current window one selected from menu // d.menu.options.selectedIndex returns a number that corresponds // to the choice they selected in the pop up menu on the form // If a user selected the first choice, selectedIndex = 0 and the // URL will be set to dest[0] or http://www.bluegrasscreative.com/ window.location.href = dest[d.destination.options.selectedIndex]; // Open new window with selected location // var x = window.open(dest[d.destination.options.selectedIndex],"New Window"); // To set the URL for another frame in this frameset // top.framename.location.href = dest[d.menu.options.selectedIndex]); } </script> </head> <body bgcolor="white"> <form name="x"> <label for="destination"><h3>Where do you want to go?</h3></label> <select id="destination" onchange="go(x)"> <option>Quick Links</option> <option value="1">MaryAnn's blog</option> <option value="2">BGC Facebook</option> <option value="3">Campbellsville University</option> </select> </form> </body> </html> [code] I hate javascript.... OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working. In fact, when I replace the two recently revised files with the originals, these icons no longer work there either. Any help would be appreciated. I'm simply at a total loss for ideas here. From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null. Code:
function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}
function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}
function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;
From the supporting php file are the following lines of code.... Code: $s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";
None of these lines of code were changed or altered when I was updating the code. Any thoughts or suggestions would be deeply appreciated? Talltom Hi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues: 1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com). 2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded. You can see the overall code he http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216) Example (using .animate): http://www.matthewruddy.com/demo/ I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution. I would appreciate if anyone could help me out. Thanks in advance. Matthew. Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. I plan to set up a photo gallery using ShadowBox, but I also want to add a zoom feature within the gallery for individual elements. Preferably using the CloudZoom plugin. How it should (hopefully) work: Click on any thumbnail --> A resized large image opens up inside ShadowBox --> CloudZoom is activated on this image on mouseover. What I've obviously got so far is this: Code: Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.setup("a.mygallery-elements", {
gallery: "mygallery"
});
};
Is there a way to call CloudZoom after the gallery is invoked. Have already scoured this forum. No luck. Can anyone out there advise me on this? Hello everyone! I'm trying to use Shadowbox with an Image Gallery on my page, and both are working except for this little thing: Both work fine by themselves on the same page: I have a clickable "contact me" button that brings up my contact page in a Shadowbox, and I have an Image Gallery that is working fine. My problem is that I want to make my images in the Image Gallery also bring up a Shadowbox box when clicked. I tried to use the same (a rel="shadowbox;width=...;height=..." href="...") in the anchor tags of the images, but when I click an image, the link loads over the page, not in a Shadowbox while it works perfectly on the contact button It doesn't look like a Javascript conflict because each one is working, just not in that particular situation. Please can someone help me sort this out! You can preview my page from he http://dl.dropbox.co...eshow/Home.html And save it from he http://dl.dropbox.co...y-slideshow.zip The slideshow is a "mootools qscroller" (included). Please help me out! I'll be very grateful! <3 <3 :* Hi, so the page is http://blackpaint.co.uk/BlackPaint09/films/ if you click on 'Tide' you can see the password prompt appears. But the problem I am having is that even if you press cancel or do the wrong password a few times it still open up the shadow box. This is the script for the password protection Code: var getPass = function(el){
var ct = 3, thePrompt = 'Please Enter Your Password', theDefault = ' ', pw = '';
while(ct-- && pw !== 'pass'){
pw = prompt(thePrompt, theDefault);
if(pw === null){ ct = 0; }
thePrompt = 'Password Incorrect, Please Try Again';
theDefault = 'Password';
}
if(pw === 'pass'){
Shadowbox.open(el);
}
return false;
};
This is an example of how a working (non shadowbox) version works successfully. http://www.tidefilm.com/ I would really appreciate some help with this, thanks, Luke p.s. - I know the protection is very low - I don't care if people can find it in the code - that is not important. Hello, I have a site that uses JS to swap images e.g. user clicks on a thumbnail and then the main image changes to show the thumb they've clicked on. So now I'd like that main image to link somewhere, and to change where it links to when the thumb is clicked on also. The link updates ok using my JS, but the shadowbox always loads the flash using the same image variable, not the new one my JS is specifying. Here's my code: Image in Source Code: Code: <div id="show_main_image"> <a href="http://www.mysite.co.uk/zoom/zoom.swf?image=http://www.mysite.co.uk/uploads/1234153173_original_1.jpg" rel="shadowbox;width=600;height=400" id="myAnchor"> <img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_original_1.jpg&w=333&h=284" border="0" name="mainimage" alt="some alt"/></a> </div> Thumb in Source code: Code: <div id="thumbpics">
<p><a href="javascript:selectPicture('1234153173','1');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_1.jpg&w=50&h=50" border="0" class="thumbpic" alt="some alt"/></a>
<a href="javascript:selectPicture('1234153173','2');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_2.jpg&w=50&h=50" border="0" class="thumbpic" alt="some alt2"/></a></p>
</div>
Javascript to change the main image: Code: function selectPicture(uniqueid,imgno)
{
var filenamepic = '../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg';
var linkurl = 'http://www.mysite.co.uk/zoom/zoom.swf?image=../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg';
document.getElementById('myAnchor').href=linkurl;
document.mainimage.src=filenamepic;
}
So the document.mainimage.src bit works, as it updates the main image, the link is updated but the shawdowbox and Flash is always showing the image it is first sent when the page is loaded. Does anyone have any ideas on how to get round this? Thanks, Nicola Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'. Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen he http://www.mikegermond.com/demo.html Here is the code that I use in 'demo.html' to launch the iFrame: Head Code: <script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script>
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script>
<script type="text/javascript">
function moveCloseLink(){
var cb=document.getElementById('sb-nav-close');
var tb=document.getElementById('sb-title');
if(tb) tb.appendChild(cb);
}
Shadowbox.init({
onOpen: moveCloseLink,
flvPlayer: '/shadowbox/player.swf',
language: 'en',
players: ["flv","iframe"],
flashParams: {allowfullscreen:'true'},
flashVars: {
skin: '/shadowbox/modieus.swf',
image: '/upload/demo-poster.jpg',
autostart: true
}
});
</script>
Body Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> What do I need to do in 'gallery/archive_iframe.html' if anything? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox. Consider me a JavaScript newbie! You're help is greatly appreciated!! I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use. Nice It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears. I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too). here's the script I'm using - there's not much to it How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera In my website, I have a script that I need help to get working. This is my script. Code: <script language="Javascript">
<!--
if (screen.width>=1024)
{
document.write('<td width="20%"><table border="0" cellpadding="0" cellspacing="0" width="162">
<tr><td height="29" style="background:url("/Custom/Top2.png");color:#116111;" align="center"><b>Newest Tutorial</b></td></tr>
<tr><td height="160" style="background:url("/Custom/Middle2.png") #000000;padding:5px 5px 0 5px;">$MYINF_8$</td></tr>
<tr><td><img src="/Custom/Bottom2.png" border="0"></td></tr>
</table>
</td>');
}
//-->
</script>
It is supposed to detect if someone has a widescreen monitor, and then add the extra box if it is widescreen. For some unknown reason, its not working. No extra box appears. Does anyone know where I went wrong? Edit: $MYINF_8$ is what goes inside the box. |
|||||||