|
JavaScript - Need Help For Rotate And Zoom Image.
Hi,
I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ Similar TutorialsAll, 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. I think this is done by Javascript. I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good. Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it? The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4 On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image. All help will is much appreciated Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!
Hello folks, I'm new here. This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images. It is probably best I explain this by using drawings. As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later) (Figure 1) Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position. (Figure 2) The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example! Is there any way to do this or script I can use? My javascripting skills aren't brilliant! Cheers. Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.
Hi i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this? $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 189, cKey = 187; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(document).keydown(function(e) { //alert(ctrlDown); if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false; }); }); Please provide me do you have any other code to do this? Thanks, Jagadeesh. I am working on a site and essentially what I need to do is to autopost a blog entry that rotates based on each day. For example, Monday posts X, Tuesday posts Y, Wednesday posts Z, Monday posts X again. Much like this site does I wonder how we could rotate the div once the page is loaded. I tested it with a click button successfully in FF4.0.1. Yet, when I tried to use <body onload = "r()"> which the func r nested the whole rotate function with its global variables, it failed. Could anyone explain how I can do it automatically? Thanks for any help!!! <!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>JS + CSS3: MozTransform rotate</title> </head> <body> <style> .rDiv { width:200px; height:200px; position:absolute; top:40px; left:50px; text-align:center; color:white; line-height:200px; background-color:black; border-radius: 50%; border-styleutset; border-width:5px; border-color:white; /* transform: rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); */} .outdiv { width:300px; height:300px; position:absolute; top:0px; left:0px; background-color:grey;} </style> <div class="outdiv"> <div id = "rDiv" class="rDiv">ROTATE</div> </div> <script> var r = document.getElementById('rDiv'); var x = 0; function rotate(){ x += 1; r.style.MozTransform="rotate("+x+"deg)"; } </script> <input style="position:absolute; top:300px;" type="button" onclick="rotate()" value = "click me to rotate it!"/> </body> </html> I want to be able to rotate Adsense ads. 3/4 of the time, it will be someone else's. 1/4 of the time, it will be mine (my code is displayed already). However, the code I tried doesn't work. Can someone tell me how to fix this - Code: <script language="JavaScript"> images = new Array(4); //the following string is really all on one line images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http: //pagead2.googlesyndication.com/pagead/show_ads.js" ></script>'; images[1] = 'other code'; images[2] = 'other code'; images[3] = 'other code'; index = Math.floor(Math.random() * images.length); document.write(images[index]); //done </script> I know very little about javascript, but was wondering if something like this can be done? Would it be possible (with mootools or jquery) to have homepage that will rotate its home page content forwards and backwards based on either triangle or square? ie, you can rotate through 3, 4, etch home pages? Sort of like a slider, but it rotates off a center axis of the triangle or square? Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 340px; height: 230px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hi, Is it possible to rotate a dial to follow the mouse cursor? I'm trying to recreate this: http://verbdesign.com/hl/rockwell/index.html but would rather it worked like this: http://www.actionscript.org/resource...-II/Page1.html ...but in javascript. Any help extremely welcome. Thanks, Richard Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>
<script type="text/javascript">
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
here's the code i've got to make some tabbed content on my website: Code: $(document).ready(function(){
$('#headingHome div').hide(); // Hide all divs
$('#headingHome div:first').show(); // Show the first div
$('.ticker_buttonP a:first').addClass('active'); // Set the class of the first link to active
$('.ticker_buttonP a').click(function(){ //When any link is clicked
$('.ticker_buttonP a').removeClass('active'); // Remove active class from all links
$(this).addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#headingHome div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
and my html (all content removed for size's sake): Code: <div id="headingHome"> <div id="first"></div><!-- /first --> <div id="second"></div><!-- /second --> <div id="third"></div><!-- /third --> <div id="fourth"></div><!-- /fourth --> <div id="fifth"></div><!-- /fifth --> <p class="ticker_buttonP"> <a href="#first"></a> <a href="#second"></a> <a href="#third"></a> <a href="#fourth"></a> <a href="#fifth"></a> </p> </div><!-- /headingHome --> that works fine so far, however i want the content to fade in and out when the tabs change, and i also want the tabs to rotate automatically like seen on this site: http://www.sosfactory.com/ I'm new to this, and I cant find anything on the net about it that i can understand enough to put it together. could anyone help me, please? many thanks Hello, I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work.. Can someone please tell me what is wrong with it? What did i do wrong? Here is the script i wrote: Code: <script type="text/javascript" >
var img1 = "img1.jpg";
function zoomin()
{
document.getElementById('img1').style.height = 220;
document.getElementById('img1').style.width = 200;
}
function zoomout()
{
document.getElementById('img1').style.height = 60;
document.getElementById('img1').style.width = 50;
}
</script>
<img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/>
Please help.. Thank you in advance. The problem is I am drawing vml shapes on my webpage, at 100% everything is fine, click events works fine, mouseover also works fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up. Click works, but away, like if there are 2 shapes together and I click on one, the other one will show the data. same with mouseover, I take the mouse over the shape, but before reaching the shape, it starts showing the effects of that mouseover. I tried to tackle this on window resize event. But it dont work. I wonder, If anyone has encountered this type of problem before & have a solution. Hello all. This script is working fine in IE7 but FF is complaining about undeclared variables. Can anybody assist to get this working in FF or do I need a new script? Any and all advice is welcome. Code: <!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>Test ZOOM</title>
<script type="text/javascript">
//Image zoom in/out script- by javascriptkit.com
//Visit JavaScript Kit (http://www.javascriptkit.com) for script
//Credit must stay intact for use
var zoomfactor=0.05 //Enter factor (0.05=5%)
function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}
function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW+"px"
whatcache.style.height=originalH+"px"
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}
function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}
</script>
</head>
<body>
<!-- CHANGE 99 to your image width, 100 to image height, and "office_map" to your image's name-->
<a href="#" onmouseover="zoom(100,63,'office_map_6','in')" onmouseout="clearzoom()">Zoom In</a> |
<a href="#" onmouseover="zoom(100,63,'office_map_6','restore')">Normal</a> |
<a href="#" onmouseover="zoom(120,60,'office_map_6','out')" onmouseout="clearzoom()">Zoom Out</a>
<div style="position:relative;width:420;height:300">
<div style="position:absolute"><img name="office_map_6" src="images/office_map_6.gif" width="100" height="63">
</div>
</div>
</body>
</html>
low tech I've seen a bunch of these around but most of them take over the screen, etc. We found the perfect one and wondered if anyone knows of any scripts that are like this one: http://www.panic.com/transmit/ (See "Screenshots" towards the bottom for the zoom lightbox effect). Hi, I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out. What exactly would be the code for that? Thanks Map can be viewed BY CLICKING HERE. Thanks in advance for any help. I am not very experienced at web design. I have spent a ton of time making a webpage with text in graphics (yes, I know, bad idea). The person I am making it for decided "on my bigger laptop, the text is too small. Can you fix that" So to save myself a ton of work, I'd like to set an automatic css zoom based on the browsers screen resolution. e.g. If 1024, then zoom: 100. if 1440, then zoom 120. If 1600, then zoom 150 or somethings like that. I can do some basic stuff in CSS, but seems like maybe javascript is required to pull this off. Help! |
|||||||