|
JavaScript - How Do I Link 2 Js Slideshows Together?
First of all I'd like to take the time to thank anyone who can assist me with this dilemma.....
On the page I am designing I have 2 js slideshows. The first one slides images right to left and the second contains the caption for the image and fades in and out. Here is an example of the exact concept of what I'm trying to do: http://designsensory.com/ The problem I'm having is that the slides will not maintain the same timing and I'm not sure how to create a single user control that controls both slideshows simultaneously. I would really appreciate if someone could help me solve the issue or at least point me in the right direction (tutorials possibly?). Here is the JS code: Code: <script type="text/javascript">
var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [500, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["css/500_300/Dairy plant.jpg"], //["image_path", "optional_link", "optional_target"]
["css/500_300/slider-big.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["css/500_300/Hospital image.jpg"],
["css/500_300/Picture2.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, pauseonmouseover:false},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 800 //transition duration (milliseconds)
})
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [280, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["css/images/Test1.png", "", "", ""],
["css/images/Test2.png", "", "_new", ""],
["css/images/Test3.png"],
["css/images/Test4.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false, pauseonmouseover:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
Once again, Thanks alot for any assistance Similar TutorialsHi, This is my site at the moment in testing: http://whnpf.perdu.servertrust.com/ I have the ideal layout of my slides underneath the actual slide itself. My problem is, everytime I copy the code and place it in again, for some reason the slide goes to the next line and not next to the other slide. Here is my code for the current slide: <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script> <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"> </script> <style type="text/css"> .stepcarousel{ position: relative; /*leave this value alone*/ border: 1px solid GREY; overflow: scroll; /*leave this value alone*/ width: 313px; /*Width of Carousel Viewer itself*/ height: 262px; /*Height should enough to fit largest content's height*/ } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px; /*margin around each panel*/ width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ } </style> <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file'] }) </script> <div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> </div> </div> Any help would be greatly appreciated, thank you Hi, I am new to Javascript, but am trying to work with a bit of script I found online to create a crossfade slideshow for my page. The problem I am having is that I want to have several slideshows on my page. On it's own, a single slideshow works fine but when I add a second (and do my best to hack the code with my limited knowledge) only one slideshow will work, or sometimes neither. I found the article from this site that explained about event conflict, but the example used looked quite a bit different to mine. Here is the js file I started with Code: window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
This uses a couple of CSS files and then you just add a div=rotator on the html to add the object and then the images and links within that div. If anyone can help, or perhaps give me a better solution, I'd be most grateful. Thanks I just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: www.equisearch.com. I like the features area on this website. Here is my code so far: Code: <html>
<head>
<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'],
['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'],
['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>'] // Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",3000);
}
</script>
</head>
<body>
<div style="width:300;text-align:left;margin-left:auto;margin-right:auto">
<div id="Caption" class="duh"></div>
<img src="http://i200.photobucket.com/albums/aa216/Jilldear/pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
<br />
</div>
</body>
</html>
I am trying to run three continuous slideshows on the same page. The script I am currently using is written below. Can it be modified so I can run all three slides at once on the same page? <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this code, but trying to have several slideshows on the page. I have set up two to test it, and one works while the other just displays a static image. What is the best way to do this? Do I need to repeat the script code in the head? Thanks in advance for any help.
Hi, I am wanting to do menus and image slideshows using javascript because my existing flash menus and slide shows no longer work on many newer devices. To save time learning all about Javascript, I purchased WoW Slider and Apycom Menus, two programs that do it all for you. Independantly both programs work perfectly, however if I use both programs together on the same website, as soon as I add my image slider it messes up my menu for that page. the menu item colours and bouncy effects when I do a mouseover on menu items no longer work correctly. Example http://www.dorset-self-catering.com note the menu working correctly on mouseover, then go to second page called "Information", this page also has a slideshow and if you now do a mouseover on the menu, you will see that all the nice properties no longer work. Is anyone able to offer some advice please. David Priest Random Image Slideshow (I want two!?) Hi I have use the code from he http://www.javascriptkit.com/script/...domslide.shtml (which works well for me) Can anyone tell me how I can get a second other random image to display on the page beside the first? I cant work it out. It seems I cant run the script twice? Here's my page: http://www.bookmarkpeople.com/chillax2.htm Any help much appreciated? A bear of simple brain. Jules. Hello here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together please help me! thanks for any help here is my script <head> <title>Easy Slider jQuery Plugin Demo</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, nextId: "slider1next", prevId: "slider1prev" }); }); </script> <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="leidyba/css/demo.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/styleleidyba.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/jquery.jscrollpane.css" media="all" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' /> <div id="container"> <div id="header"> <h1>Easy Slider jQuery Plugin - Multiple sliders</h1> </div> <div id="content"> <div id="slider"> <ul> <li><a href="http://templatica.com/preview/30"><img src="slide/images/01.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="slide/images/02.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="slide/images/03.jpg" alt="Css Template Preview" /></a></li> </ul> </div> <div class="container"> <div id="ca-container" class="ca-container"> <div class="ca-wrapper"> <div class="ca-item ca-item-1"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Knygų leidyba</h3> <h4> <span class="ca-quote">“</span> <span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Knygų leidyba</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my </p> <p>When, while the </p> <p>She packed her .</p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> <div class="ca-item ca-item-2"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Reklaminiai bukletai</h3> <h4> <span class="ca-quote">“</span> <span>I hold that the more </span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Would you eat your dog?</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my .</p> <p>When, while the </p> <p>She packed her </p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="leidyba/js/jquery.easing.1.3.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="leidyba/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="leidyba/js/jquery.contentcarousel.js"></script> <script type="text/javascript"> $('#ca-container').contentcarousel({ }); </script> </div> </body> </html> I'm working on a technical document that has a glossary section. When I use a technical term, I link to its definition in the glossary then provide a return link to return the user to whence they came. But if I use that same term again, and if I want to link it to the glossary, I need to duplicate the glossary entry in order to provide a return link that returns them to the right place. Is there some way I could link them to the glossary and embed a unique return link in the link to the glossary?
I've been using this slidehsow but each time I click on a link (Newsflash) it goes to yahoo.com, even though each link goes to a different website, it looks like the last link of the last slidehsow is the one which controls all the slidehsow links link of slidshow as you can see from the code each link for each slidehsow should go to a diffrent website. Code:
<div class="lof-main-outer">
<ul class="lof-main-wapper">
<li>
<img src="images/791902news3.jpg" title="Newsflash 2" height="300" width="900">
<div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 2" href="http://www.google.com">Newsflash 2</a></h3>
<p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
</div>
</li>
<li>
<img src="images/435576news10.jpg" title="Newsflash 1" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 1" href="http://www.gmx.com">Newsflash 1</a></h3>
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>
</div>
</li>
<li>
<img src="images/641906img1.jpg" title="Newsflash 3" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 3" href="www.godaddy.com">Newsflash 3</a></h3>
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.flickr.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.intel.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
<li>
<img src="images/416719news7.jpg" title="Newsflash 5" height="300" width="900"> <div class="lof-main-item-desc">
<h3><a target="_parent" title="Newsflash 5" href="http://www.yahoo.com">Newsflash 5</a></h3>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
</div>
</li>
</ul>
</div>
I know you may think... why is he doing this? There is a reason, this is just the simplified version. Code: <a href="URL TO COPY" id="COPYME">Next</a> <a href="COPIED URL HERE VIA JAVASCRIPT" >Next</a> Hello and good morning... I am a locking for a script, so i can open this: <div class="topprofile"><a href="index.php?side=editprofile#editpw">Edit password</div> After i have push in this, "topprofile" button, i want to have link like this: http://localhost/index.php?side=editprofile#editpw Can you plaese help me with this one? Hi, I have a flash code, I need to add alink in this code, but I don't know how I can. This is the link I want to add " www.baligim.com" Thanks. Code: Code: <div id="wb_Flash1" style="margin:0;padding:0;position:absolute;width:300px;height:60px;text-align:left;z-index:0;"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" <param name="movie" value="http://www.baligim.com/download/reklam-banner.swf"> <embed src="http://www.baligim.com/download/reklam-banner.swf" width="300" height="60"> </embed> </object></div> . How can I let link page open using IE? for example, I open a webpage using firefox or chrome/opera/safari. when I click the link, open the link using IE <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head2" runat="server"> </head> <body> <a href="#" onClick="window.showModalDialog ('http://www.google.ca','','width=600,height=600','screenx=200','screeny=200')"><img src="images/benemanc-01th.jpg" alt="img-01" width="125" height="155" class="thumb" style="display:inline"></a> </body> </html> Many thanks T Hello! I wan't to know what is the best way for hitting a given URL whit javascript. I just need that that page hitted know that it was hitted. Tanks! Hi all, Trying to something i guess is pretty basic but i cant seem to get it working. I have a page with an iframe name="grid" and on that page i am also running a mootools script which toggles a pannel. The javascript for the pannel is: Code: <script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
so this link opens the pannel Code: <a href="#" id="toggle">Show Panel</a> However, i want to make a it so that one link can both call a page in the iframe AND toggle the pannel. I tried: Code: <a href="page_to_call.htm" target="grid" id="toggle">Show panel and call page in iframe</a> but no joy. I want more than one link to be able to do this (calling different pages to the iframe and each one toggling the pannel) Can anyone help? Thanks loads in advance for any reply. Hi all, I am new to this forum so hope this is the right place to post my question. I'm learning how to create JavaScript menus and using online generators and tutorials, I was able to get the following working. What I can't figure out, is how I can add link to the items. For example, I want to be able to click on the sub-menu and it takes me to test.html Would someone please help me please? Thanks in advance. Edit - Code removed I once bought some plans on the net and was sent a link that said I could open so many times or for 1 week, I cant remember exactly. But now I am doing a web site and need a link like that any ideas. I would prefer it to open only so many times.
|
|||||||