|
JavaScript - Links To Rotating Images In New Window?
Hello,
I need the links to the rotating images to open in a new window. Is there an easy way to do this? Here is my code: [CODE] <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"]; slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"]; slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"]; slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"]; slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"]; slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"]; slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> [CODE] [URL]http://jpl.coj.net Thank you so much for your help, Elbee Similar TutorialsHello, I use the following script for my rotating images with links and would like to know if there is a way to have the links display in a new window: Code: <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"]; slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"]; slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"]; slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"]; slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"]; slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"]; slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"]; slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"]; slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> Thanks for your help, Elbee Hi, I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links? Any help would be much appreciated. Thanks! Hi, I'm hoping this is a simple question but I'm such a beginner I need some help! I recently found a great little code that allows me to have rotating ads with links on my website. It works perfectly but I need to have four images rotating, not three and I can't work out how to do it. Can anyone help? Thanks! Code: <html>
<head>
<title>Essex Mums Header</title>
<script language="JavaScript">
if (document.images) {
ads = new Array(3);
ads[0] = "http://www.christmastoylist.co.uk/christmas1.jpg" ;
ads[1] = "http://www.essexmums.org/images/derekanson.jpg";
ads[2] = "http://www.essexmums.org/images/littleones.jpg";
ads[3] = "http://www.essexmums.org/images/ingrave.jpg";
ads2 = new Array(3);
ads2[0]="http://www.essexmums.org/images/letsplayfair1.jpg";
ads2[1]="http://www.essexmums.org/images/letsplayfair2.jpg";
ads2[2]="http://www.essexmums.org/images/letsplayfair3.jpg";
ads2[3]="http://www.essexmums.org/images/letsplayfair4.jpg";
}
newplace = new Array(3);
newplace[0] = "http://www.christmastoylist.co.uk/"
newplace[1] = "http://www.derekanson.com"
newplace[2] = "http://www.littleonesclothing.co.uk/"
newplace[3] = "http://www.ingravecommunitymarket.blogspot.com/
otherplace = new Array(3);
otherplace[0] = "http://www.letsplayfair.co.uk"
otherplace[1] = "http://www.letsplayfair.co.uk"
otherplace[2] = "http://www.letsplayfair.co.uk"
otherplace[3] = "http://www.letsplayfair.co.uk"
var timer = null
var counter = 0
function banner() {
timer=setTimeout("banner()", 8000);
counter++;
if (counter >= 3)
counter = 0;
document.bannerad.src = ads[counter];
document.bannerad2.src = ads2[counter];
}
function left() {
counter2 = counter;
window.location.href = newplace[counter2];
}
function right() {
counter2 = counter;
window.location.href = otherplace[counter2];
}
</script>
</head>
<body
style="margin: auto; width: 1024px; display: block; font-family: Myriad Web Pro;"
onload="banner()">
<div>
<table style="text-align: center; width: 1024px; height: 176px;"
class="header" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="background-color: rgb(232, 248, 255);">
<td style="vertical-align: top; width: 200px; text-align: center;">
<div
style="border-style: solid; border-width: 1px; margin: 20px 5px 5px; width: 190px; height: 160px;"><a
href="javascript:left()" rel="nofollow"><img
src="http://www.christmastoylist.co.uk/christmas1.jpg" name="bannerad"
border="0" height="160" width="190"></a> </div>
</td>
<td style="vertical-align: top; width: 615px; height: 172px;">
<div style="margin-top: 20px;"><a href="http://www.essexmums.org"><img
style="border: 0px solid ; width: 615px; height: 172px; margin-bottom: 20px;"
alt="" src="http://www.essexmums.org/images/banner.jpg" hspace="5"></a></div>
</td>
<td style="vertical-align: top; width: 200px; text-align: center;">
<div
style="border-style: solid; border-width: 1px; margin: 20px 5px 5px; width: 190px; height: 160px;"><a
href="javascript:right()"><img
src="http://www.essexmums.org/images/letsplayfair1.jpg"
name="bannerad2" border="0" height="160" width="190"></a> </div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hi all, I hoping somebody can help me. I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals. The code below seems to be working but I can only get working links on the first line that appears. Please can somebody help a gal out? xo [CODE] <html> <head> <title>Rotating Text</title> <script type="text/javascript"> var rotatingTextElement; var rotatingText = new Array(); var ctr = 0; function initRotateText() { rotatingTextElement = document.getElementById("textToChange"); rotatingText[0] = rotatingTextElement.innerHTML; rotatingText[1] = "why won't you work!?!?!?"; rotatingText[2] = "purdy please"; setInterval(rotateText, 5000); } function rotateText() { ctr++; if(ctr >= rotatingText.length) { ctr = 0; } rotatingTextElement.innerHTML = rotatingText[ctr]; } window.onload = initRotateText; </script> </head> <body> <span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> </body> </html> I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! Hello Everyone! There are several other pages over a span of sites that deal with this matter, but none that seem to work for me. So I'm hoping you guys can help. I'm trying to get a set of rotating images to house a set of links that visitors can click on. Here's code I slapped together: Code: <script language="javascript" type="text/javascript">
var imgArray = new Array();
// Enter the names of the images below
imgArray[0]="http://www.555.com/file.JPG";
imgArray[1]="http://www.555.com/file.JPG";
imgArray[2]="http://www.555.com/file.JPG";
// Set up URL array
var URL = new Array();
URL[0] = "http://www.555.com";
URL[1] = "http://www.555.com";
URL[2] = "http://www.555.com";
var newImage = 0 ;
var totalImg = imgArray.length ;
var currentURL = (URL.length - 1);
function cycleImg() {
if (newImage == totalImg) {
newImage = 0 ;
} else {
document.image.src = imgArray[newImage];
document.image.URL = URL[a] ;
// set the time below for length of image display
// i.e., "4*1000" is 4 seconds
setTimeout("cycleImg()", 3*1000);
newImage++;
}
}
</script>
<body onload="cycleImg();">
<div id="rotator_div">
<p style="text-align:center;"> <strong>Current Sponsors:</strong></p>
<img id="rotating_img" src="http://www.555.com/file.JPG" name="image"/>
</div>
</body>
Now it only loads the first image, and disappears; plus the image that does load, doesn't have the corresponding URL attached to it in as a link. Could anyone please help with the adjustments that I need to make to pull this off? Thanks very much in advance. Hi I usually work in html, but I am trying to put up rotating images that fade. I found some Javascript coding but it isn't working correctly. I only see the first image and it fades but nothing happens after that. This is the code I have: Code: <script language="JavaScript">
<!-- Begin
var slideShowSpeed = 5000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'image1.jpg'
Pic[1] = 'image2.jpg'
Pic[2] = 'image3.jpg'
Pic[3] = 'image1.jpg'
Pic[4] = 'image2.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
<body link="Red" vlink="Red" alink="Red" leftmargin=0 topmargin=0 bgcolor="Black"onLoad="runSlideShow()">
<img src="images/image1.jpg" alt="" name="SlideShow" id="SlideShow" width="300" height="200" border="0" align="left">
Can some assist me twith this? Thanks, Lisa Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
I am completely a beginner at coding and really do not know much right now. This is the day of week link rotation script which works just great: Code: <script type="text/javascript">
<!--
var MyEveryDayLinks = [
['Sunday', 'http://www.google.com', 'Google'],
['Monday', 'myURL', 'LinkName'],
['Tuesday', 'myURL', 'LinkName'],
['Wednesday', 'myURL', 'LinkName'],
['Thursday', 'myURL', 'LinkName'],
['Friday', 'myURL', 'LinkName'],
['Saturday', 'myURL', 'LinkName']
];
var today = new Date();
var L = today.getDay();
document.write('Today is ' + MyEveryDayLinks[L][0] + '. My daily
URLs: <a href="' + MyEveryDayLinks[L][1] + '">' +
MyEveryDayLinks[L][2] + '<\/a>.') ;
// -->
</script>
Unfortunately I can't open urls in a new window. I would so like this to work...but don't know why i can't make it work. I've tried something like this with no luck...any ideas?: Code: <a href="javascript:[window.open(' + MyEveryDayLinks[L][1] + ', 'height=200, width=200',)];">' + MyEveryDayLinks[L][2] + '<\/a>.') ;
Instead of using window.open, which I understand opens a new window, is there a code that will make the link open in the parent window?
I need help turning the following inline code: Code: <a href="http://www.bing.com/" name="bing" onclick="return !window.open(this.href)">Bing</a><br> <a href="http://www.lycos.com/" name="lycos" onclick="return !window.open(this.href)">Lycos</a><br> <a href="http://www.dogpile.com/" name="dogpile" onclick="return !window.open(this.href)">DogPile</a><br> into an external javascript function that will do the same thing (open all links in a new window individually if javascript is enabled, without destroying links in html for if javascript is not enabled). Any smarties out there have any good suggestions? Hi, How can I set the following widget so it opens the links (pages) in a new window? Code: <SCRIPT charset="utf-8" type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/oweg0a-20/8018/9000c5f7-9ce1-4eb6-887f-0491e54add7d"> </SCRIPT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Foweg0a-20%2F8018%2F9000c5f7-9ce1-4eb6-887f-0491e54add7d&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT> Thanks in advance! Regards Rain Lover Hi there, I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow). I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link. Any suggestions? Thank you all. B I'm a php developer and have come across a mind boggling issue involving Javascript. I'm uploading images to a server without issue. They are being returned to the page in thumbnails. The script works great but I can't get the links for the images that I've uploaded. If I right click and view the image I can see the link on the server. How would I go about getting that link? If I look at the source code the link isn't present. Its a dynamically generated link for the uploaded image. Being completely unfamiliar with Javascript I'm hoping someone here can help me out. Here's the code I'm working with: Code: <input type="file" name="u" size="40" style="width:500px"/><br/>
</div>
<style type="text/css">
.flashUpload {width : 151px;}
</style>
<script>
document.write('<script type="text/javascript" language="JavaScript" src="mytoken"' + '><' + '/script>');
function processUrlResponse(pic,error,window) {
if ( window.parent != 'undefined' )
$(window).remove();
}
var errorTexts = {
'ERROR' :'There was an error uploading your picture.',
'FS' : 'The file size of the picture you attempted to add is too large. Please reduce your picture\'s file size before adding it again.',
'FP' : 'You specified a picture file that could not be found on your computer.',
'ME' : 'There was an error uploading your picture. ',
'FC' : 'The content of your picture file is corrupted.',
'FF' : 'There was a problem with the format of your picture file.',
'SD' : 'There was a problem connecting to Picture Services.'
};
var popupMsg =
'<CENTER class="modal">' +
'<TABLE height=210 cellSpacing=0 cellPadding=0 width=240 border=1>' +
'<TR vAlign=top align=left><TD>' +
'<TABLE cellSpacing=0 cellPadding=6 width="100%" border=0>' +
'<TR><TD align=right><div class="closeBtn close"> </div></TD></TR>' +
'<TR align=middle>' +
'<TD><B><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=4><I>' +
'Loading Pictures' +
'</I></FONT><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=2>' +
'Please wait.' +
'</B></FONT><BR><BR><img src="myupload.com/busy.gif"/></p></TD></TR></TABLE></TD></TR></TABLE></CENTER>';
var imageUpload = {
disableFlashResize :true,
uploadUrl : 'myupload.com',
dataField : 'Photo',
thumbnailSizeId : '14',
defaultSizeId : '18',
removeText : 'Remove',
cancelText : 'Cancel',
retryText : 'Retry upload',
uploadingText : 'Image uploading',
flash_button_width : 151,
flash_button_height : 18,
flash_button_text : '<span class="button">Select Images</span>',
flash_button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;font-weight:bold;} .buttonSmall { font-size: 10pt; }',
flash_button_text_top_padding : 1,
flash_button_text_left_padding : 11,
errorTexts : errorTexts,
popupMsg : popupMsg
};
My head is spinning. Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript. I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin. Here's the code in the head of my page: Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
and here's the Body code: Code: <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
slideshowlinks("/", "/", "/", "/", "/", "/", "/")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=8000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works. If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website. Hi all I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page. I would be eternally grateful for any ideas how to replicate this effect. Thanks Rob Hey Im trying to add links in the images for EasySlide but I cant see to see where to put it..... Here is the .js code: Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.handStopped = false;
this.animating = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.contentDiv = this.scroller.down('div');
this.current = $(this.contentDiv.children[0].id);
this.sectionWidth = this.contentDiv.children[0].getWidth();
this.slideRelations = {};
this.options = Object.extend({
effectType: 'mosaic',
duration: 3.0,
frequency: 3,
eRows: Prototype.Browser.IE ? 3 : 6,
eCols: Prototype.Browser.IE ? 6 : 12,
eColor: '#FFFFFF'
}, options || {});
this.effects = {
'scroll' : this.scroll,
'speedscroll' : this.speedscroll,
'fade' : this.fade,
'blend' : this.blend,
'mosaic' : this.mosaic
};
this.sections = this.wrapper.getElementsBySelector('div.section');
for (var i = 0; i < this.sections.length; i++) {
var nextSibling = this.sections[i].nextSiblings()[0];
if (nextSibling){
this.slideRelations[this.sections[i].id] = nextSibling.id;
} else {
this.slideRelations[this.sections[i].id] = this.sections[0].id;
}
this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
}
this.events = {
mouseover: this.pause.bind(this),
mouseout: this.resume.bind(this)
};
this.addObservers();
if (this.options.autoGlide) {
this.start();
} else {
this.handStopped = true;
}
},
scroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
new Effect.Parallel([
new Effect.Move(elementIdToShow, {
sync: true,
x: 0,
y: 0,
mode: 'absolute'
}),
new Effect.Move(glider.current.id, {
sync: true,
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute'
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
speedscroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
$(elementIdToShow).setStyle({zIndex: 5});
$(glider.current.id).setStyle({zIndex: 1});
var currentId = glider.current.id;
new Effect.Move(elementIdToShow, {
x: 0,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration / 2,
afterFinish: function() {
moveCurrent.cancel();
$(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
glider.setAnimating(false);
}
});
var moveCurrent = new Effect.Move(glider.current.id, {
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration
});
}
}
},
fade: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Opacity(glider.current.id, {
duration: glider.options.duration,
from: 1.0,
to: 0.0,
afterFinish: function() {
new Effect.Opacity(elementIdToShow, {
duration: glider.options.duration,
from: 0.0,
to: 1.0,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}.bind(glider)
});
}
}
},
blend: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Parallel([
new Effect.Opacity(glider.current.id, {
sync: true,
duration: glider.options.duration,
from: 1.0,
to: 0.0
}),
new Effect.Opacity(elementIdToShow, {
sync: true,
duration: glider.options.duration,
from: 0.0,
to: 1.0
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
mosaic: function() {
var glider = this;
var delayedAppear = function(eSquare) {
var opacity = Math.random();
new Effect.Parallel([
new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
], {sync: false});
};
return {
prepa function(el, i) {
if (i > 0) {
el.setStyle({ zIndex : 0 });
el.hide();
} else {
el.setStyle({ zIndex : 999 });
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
if (i == (glider.sections.length - 1)) {
glider.eSquares = [];
var elDimension = el.getDimensions();
var elWidth = elDimension.width;
var elHeight = elDimension.height;
var sqWidth = elWidth / glider.options.eCols;
var sqHeight = elHeight / glider.options.eRows;
$R(0, glider.options.eCols-1).each(function(col) {
glider.eSquares[col] = [];
$R(0, glider.options.eRows-1).each(function(row) {
var sqLeft = col * sqWidth;
var sqTop = row * sqHeight;
glider.eSquares[col][row] = new Element('div').setStyle({
opacity : 0,
backgroundColor : glider.options.eColor,
position : 'absolute',
zIndex : 5,
left : sqLeft + 'px',
top : sqTop + 'px',
width : sqWidth + 'px',
height : sqHeight + 'px'
});
el.up('div').insert(glider.eSquares[col][row]);
}.bind(glider))
}.bind(glider));
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : 999 });
$(glider.current.id).setStyle({ zIndex : 0 });
new Effect.Parallel([
new Effect.Fade(glider.current.id, {sync: true}),
new Effect.Appear(elementIdToShow, {sync: true})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
$R(0, glider.options.eCols-1).each(function(col) {
$R(0, glider.options.eRows-1).each(function(row) {
var eSquare = glider.eSquares[col][row];
var delay = Math.random() * (glider.options.duration / 3) * 1000;
setTimeout(delayedAppear.bind(glider, eSquare), delay);
}.bind(this))
}.bind(this));
}
}
},
setAnimating: function(flag) {
this.animating = flag;
if (flag) {
$$('.easyslidecontrolwr')[0].addClassName('disabled');
} else {
$$('.easyslidecontrolwr')[0].removeClassName('disabled');
}
},
addObservers: function(){
this.wrapper.observe('mouseover', this.events.mouseover);
this.wrapper.observe('mouseout', this.events.mouseout);
var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
descriptions.invoke('observe', 'mouseover', this.makeActive);
descriptions.invoke('observe', 'mouseout', this.makeInactive);
//Nubmbers
var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
controls.invoke('observe', 'click', this.numClick.bind(this));
//Arrows
var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
stop.invoke('observe', 'click', this.stop.bind(this));
var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
play.invoke('observe', 'click', this.start.bind(this));
var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
prev.invoke('observe', 'click', this.previous.bind(this));
var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
next.invoke('observe', 'click', this.next.bind(this));
},
numClick: function(event){
var element = Event.findElement(event, 'a'); /*clicked link*/
var nextElementId = element.href.split('#')[1];
var direction = 'normal';
for (var i in this.slideRelations) {
if (i === this.current.id) {
direction = 'normal';
break;
}
if (i === nextElementId) {
direction = 'reverse';
break;
}
}
this.animate(nextElementId, direction);
Event.stop(event);
},
animate: function(elementIdToShow, direction){
if (this.animating || this.current.id == elementIdToShow) {
return;
}
this.setAnimating(true);
this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);
this.current = $(elementIdToShow);
},
next: function(event){
var nextMove = '';
nextMove = this.slideRelations[this.current.id];
this.animate(nextMove, 'normal');
if (event) {
Event.stop(event);
}
},
previous: function(event){
var prevMove = '';
for (var i in this.slideRelations) {
if (this.slideRelations[i] == this.current.id) {
prevMove = i;
break;
}
}
this.animate(prevMove, 'reverse');
if (event) {
Event.stop(event);
}
},
makeActive: function(event){
var element = Event.findElement(event, 'div');
element.addClassName('active');
},
makeInactive: function(event){
var element = Event.findElement(event, 'div');
element.removeClassName('active');
},
toggleControl: function(el){
if (!el) return false;
$$('.easyslidercontrol a').invoke('removeClassName', 'active');
el.addClassName('active');
},
stop: function(event){
this.handStopped = true;
clearTimeout(this.timer);
Event.stop(event);
},
start: function(event){
this.handStopped = false;
this.periodicallyUpdate();
if (event) {
Event.stop(event);
}
},
pause: function(event){
if (!this.handStopped) {
clearTimeout(this.timer);
this.timer = null;
}
Event.stop(event);
},
resume: function(event){
if (!this.handStopped) {
this.periodicallyUpdate();
}
},
periodicallyUpdate: function(){
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
}
});
Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this? I imagine there is a onClick event somewhere in there but I just cannot find it. Thanks! Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need. Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. 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, I have a thumbnail gallery on my website. The thumbnails can be opened in a new window using: Code: <a href="/images/flowers22.jpg" rel="nofollow" target="_blank"><img src="images/flowers.jpg" alt="flowers" onClick="MM_openBrWindow('/images/flowers22.jpg','','status=yes,width=630,height=379');return false" /></a>
I have inserted javascript code into my .js stylesheet to disable the right clicking of images on the page where the thumbnails a Code: var clickmessage="Apologies, images cannot be copied."
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
However, when the images open in a new window, the 'no right click' function does not apply. Does anyone know how to disable the right click for the newly opened images? Many thanks! |
|||||||