|
JavaScript - Shadowbox And Cloudzoom Integration
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? Similar TutorialsHello 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!! 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. Hi, I have this code that can be used to simulate the F11 function in the Internet Explorer. Code: <script type="text/javascript">
function F11() {
window.open("page.html", "", "channelmode");
}
</script>
and you call it by adding this to a html link : Code: <a href="javascript:F11()">click here to open in channelmode</a> or Code: <body onload="javascript:F11()"> the problem is that when the function was written, , it said to open "page.html" in channel mode. I want to open the page itself in channelmode onload... not "page.html" how can I modify the function? something like...window self open! thanks So, I've designed a basic site and everything is fine except for the posts. You can see the site here. What I'm talking about is this: Code: <div id="posts"> <h1>Bonjour</h1> <p>Welcome to my website! Please note that it's fairly new, and so it might still go under some construction, so don't expect what you see now to be stay the same forever. Furthermore, if you have any suggestions, please run them by me and I'll take them into consideration.</p> <p>As of 9/23: Working on Adding Games.</p> <br> </div> The CSS code for it is: Code: #posts{text-indent:15px;background-color:#424242;border:3px solid #e0e0e0;position:absolute;left:212px;top:180px;width:565px;}
Now, the post is only one post, and I can't add any more as it is only one div. I was wondering if there was an easy way to make a master, parent div and all the div's inside it would be transformed into div's that are respectively positioned under it, automatically. ^^ Now, I liked that idea at first but then I thought of the technicalities such as having to use HTML to write blog posts which would be kind of ridiculous and I was wondering if anyone knows how of a simple-free easy to integrate blog system which could be embedded into my site without having to re-design everything. For a project in my high school web design class, I need to integrate an Excel spreadsheet as data so to speak for a web page. I want to pull the prices from the sheet, and make them appear on the page. I'd like to pull it from the sheet so that the client can still adjust and edit the prices without having to reach the actual webpage. Conceptually, I thought this would be fairly straight forward, but in researching how to do this, I got very confused. I'm not even positive that I'm putting this in the right section. So my main question is this: Is there a way to integrate an Excel spreadsheet in such a way that it can provide data for certain fields of a webpage? If so, can someone please explain how? Thanks, A Confused High School Girl Hi, I have a form which goes to my insert page which inserts the data into the table. Except I didn't want to do a redirect to another page so I thought I would do an Ajax call. Both pages work until I change it to an ajax call. I am pretty certain that it is because I took out the <form action="insert.php"> because otherwise the page would redirect but if that is the case I don't know my way around it and if it isn't the problem I'm not sure what is. But here is my code: Form: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html><head>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST",File,true);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtHint">
<form action="" method="post"/>
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para1" required="required" onclick="clearMe(this)">
Insert Paragraph 1
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para2" onclick="clearMe(this)">
Insert Paragraph 2
</textarea>
</div>
<br />
<br />
<input type="submit" value="Submit" onclick="loadXMLDOC('insert.php','txtHint')" />
</form>
</div>
</body>
And my insert.php is: Code: <?php
$con = mysql_connect("localhost","user","password");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$sql="INSERT INTO abc (para1, para2, date, time)
VALUES
('{$_SESSION['para1]}', '{$_POST['para2']}',CURDATE(), CURTIME())";
mysql_query($sql) or die('Error: ' . mysql_error());
mysql_close($con)
?>
|
|||||||