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;
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="[URL]pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
<br />
</div>
</body>
</html>
View 14 Replies
ADVERTISEMENT
Aug 20, 2010
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:
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder')
.src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc')
.childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc')
.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}}
</script>
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).
View 4 Replies
View Related
Jan 20, 2011
[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.
View 9 Replies
View Related
Apr 28, 2009
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">
[code]....
View 1 Replies
View Related
Nov 23, 2010
I am trying to change a picture in a program but I keeps being a broken picture link.
[Code]...
View 1 Replies
View Related
Jan 23, 2011
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.
[Code]...
View 4 Replies
View Related
Jul 19, 2010
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?
View 5 Replies
View Related
Oct 17, 2006
I'd like to know please if there is a Javascript solution for enlarging pictures.
The outcome I am seeking is for the user to click on a thumbnail picture which then links to a bigger picture I dont want to use a HTML hyperlink.
View 4 Replies
View Related
Aug 15, 2011
I'm a beginner and I have the following html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
[Code]...
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.
View 3 Replies
View Related
Mar 28, 2011
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!
], .....
View 8 Replies
View Related
Oct 15, 2009
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?
View 3 Replies
View Related
May 2, 2010
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>
View 3 Replies
View Related
Oct 24, 2010
How can I create a slideshow like the below. [URL]
View 1 Replies
View Related
Oct 21, 2009
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.
View 3 Replies
View Related
Feb 11, 2011
Random Image Slideshow (I want two!?) :eek:
I have use the code from here: [URL](which works well for 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: [URL]
View 6 Replies
View Related
Jul 26, 2006
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:
View 1 Replies
View Related
Jun 28, 2011
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() .....
View 2 Replies
View Related
May 18, 2010
Is there a tool (free or paid) which can create slideshows to be used for websites?
View 4 Replies
View Related
Jul 23, 2005
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....
View 2 Replies
View Related
Jun 9, 2005
Whats the easies way to add captions to a slide show.
I have the basic slide show format with images in an array and having them get cycled through via a function like chgSlide(-1) or chgSlide(1).
I can' easily add the captions to an array. I'm not sure how to print the captions on the page. I could use a text box but thats lame.
How could I print these on the page as each image is updated in the slide show?
View 8 Replies
View Related
Feb 28, 2010
I've started studying JavaScript recently. The following simple scenario from the Russian textbook is not implemented properly on my PC.
<HTML>
<HEAD>
<TITLE>Link Description</TITLE>[code]....
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.
View 4 Replies
View Related
Jul 17, 2010
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!
[Code]....
View 4 Replies
View Related
Aug 2, 2010
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();
[Code]....
View 4 Replies
View Related
Jun 6, 2011
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:
[code]....
View 7 Replies
View Related
Sep 19, 2011
Here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together
Here is my script:
View 4 Replies
View Related
Aug 17, 2011
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]
} } .....
View 1 Replies
View Related
