Captions In Slideshows - Put Description Beside Picture?
Apr 29, 2010
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: [URL]. I like the features area on this website. Here is my code so far:
<html>
<head>
<script type="text/javascript">
// Modified for: [URL]
var ImgPtr = -1;// -1 for first pass only
var BaseDirectory = '[URL]';
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;
I've got a simple javascript image gallery I'm using, but I was wondering if it would be possible to use HTML in the description area. Basically I want to be able to create paragraphs, bold text, and links in the description area. Is it possible? Here's what I'm using:
Then the markup: <img id="placeholder" src="images/twoBottles.jpg" alt="" /> (Where the image appears) <p id="desc">Choose an image to begin</p> (Where the image descriptions appear) <a onclick="return showPic(this)" href="images/condiments.jpg" title="The description which in some cases is 2 or 3 paragraphs long and I would like to format somehow">two bottles</a> (clicking this text opens that picture in the image area).
[URL]. In the picture I have a picture div and a text div. The picture and text are related to one another. I want it that when you click the right or left arrow the pic and text change together. I dont really care how they change, slide, fade, or simple do a show/hide kind of effect. How to make one div have a slide show when you mouseover to right or left it moves.
The code is working 100%, but the only problem is with the function calling statement. It is working on the first img (picture) i want it to be called on the second picture.
<!DOCTYPE html PUBLIC "-w3cDTD xhtml 1.0 strict EN" <html xmlns=http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = http:www.w3.org/1999/xhtml">
I've been working on photo gallery that can be seen here: [URL] I would like the title to change according to the picture selected. This works when you click on the thumbnail images. However, it current does not work with the drop-down menu, "back" and "next" buttons, or the automatic slide-show.
i looking for a way to stretch picture in background and put some divs over that picture with links and text. what i find so far don't work in all browsers any one know something like this?
I would like to place 3 buttons on the page. Each button opens a different XML file loading the right image list into the page-wrap div. (for a jquery slideshow which picks up the images from the divider) How can I change the url: "gallery3.xml" part to a variable and change its value by clicking on the different buttons? E.g: Gallery1 button opens gallery1.xml Gallery2 button opens gallery2.xml etc.
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: [URL]. 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.
Here is the JS 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", "[URL]", "_new"], ["css/500_300/Hospital image.jpg"], ["css/500_300/Picture2.jpg"] //<--no trailing comma after very last image element! ], .....
I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this [URL] 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?
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 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 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; ..... 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.
I want to use the same Photoslider II code but for three different slideshows on same index page. The problem is one works fine but when I add another one on same page everything gets screwed up. The code is below but how can I make adjustments so each one works independently? Code:
I am having trouble with multiple slideshows. I have two seperate and I am trying to fun them on the same intervals. The second slideshow stops.
<script type="text/javascript"> <!-- var image1=new Image() image1.src="ciscoflash/01.jpg" var image2=new Image() image2.src="ciscoflash/02.jpg" var image3=new Image() image3.src="ciscoflash/03.jpg" var image4=new Image() image4.src="ciscoflash/04.jpg" var image5=new Image() image5.src="ciscoflash/05.jpg" var image6=new Image() .....
This Link Description script is driving me crazy. The first URL below is the script exactly as I got it from javascriptsource.com, which works fine. But as soon as I replace the linktext with my own (see the second URL) the script stops working. I didn't change anything else from the original but the linktext. I've been racking my brains for hours but whatever it is, I'm missing it....
I just typed the script from the book char by char. I use Firefox browser, v.3.5.7. The error console does not display any mistakes. why on placing mouse over a link the status bar displays A HREF text instead of the link description.
I need to add different captions for each image of my onmouseover gallery. The way this gallery works is when the mouse goes over the text the image on the right changes. What should I add to my javascript code? This is the code I put in the head:
<script> /*Rollover effect on different image script- By JavaScript Kit (http://javascriptkit.com) Over 200+ free scripts here!
I'd like to add captions to this this simple JavaScript slideshow. I have looked and looked and can't find one that doesn't use tables for the captions. I'd really like to stick to <divs> if possible.
Code JavaScript: <script language="JavaScript"> var i = 0; var path = new Array();
I have to pass a certain number of parameters, extracted from DB, to a javascript function.Among them there are for example numbers but also descriptions as names and surnames
Code: <A href="javascript:doAction("+value+")"></A>" Where value is a set of parameters formatted for example in the following way:
I am having trouble creating two slideshows on a single page. I know that there is a problem of one slideshow overriding the other, but I can't figure out what to change or where in order to make both functional. I've seen other posts related to this, but those I've tried don't work for me. Here's my partial code...I only included the parts I think are necessary.
<script language="JavaScript1.1"> 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] } } .....
