Image Gallery Captions - Possible To Use HTML In Description Area

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


ADVERTISEMENT

Adding Image Alternate Description From Dynamic Photo Gallery?

Jul 16, 2010

am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no successHere is the code I have:

<html>
<head>
<style media="screen,projection" type="text/css">

[code]....

View 4 Replies View Related

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 View Related

Trying Create Captions For Photo Gallery

Aug 20, 2007

I've taking two existing bits of javascript and tried to put them together. What I would like is when you click on a "Thumbnail" the Image displays full size and has corresponding "Caption" text show up in a text box below. Code:

View 4 Replies View Related

Photo Gallery Where Client Add Captions?

Sep 19, 2011

recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. what "Pure Gallery looks like, you can see it at this link to my site. [URL]....

View 4 Replies View Related

JQuery :: Image Gallery Slider Fails When Called From An External Html File?

Jan 18, 2011

I've followed an online tutorial and successfully created a gallery with a horizontal slide bar using [very specifically] JQuery versions 1.2.6.js and jquery-ui-full-1.5.2.min.js (since otherwise, it does not seem to work).After creating the gallery in the index.html, I decided to put all gallery and slider related scripts into a separate html file to be called with a PHP and ajax script. Here's the problem: While the slider [image] components as well as gallery images [in the slider] loads fine, the slider handler does not work anymore! You can see my problem when you select 'Gallery' from my website. Scroll to the bottom where the horizontal slider is and try moving it. 5%-10% of the time it works, for some odd reason.

I'm not sure what code to show here.. but below are the links I've established to the .js files. With the paths, since the index.html is doing all the calling, I wouldn't have to deal with any '../../*.js' type of paths in order to jump up file levels (this also proven since the images in the gallery are done without '../../' paths).NOTE: ALL of these scripts already work if implemented directly into the index.html. This fails when executed from an external html file

<script src="webpage/scripts/js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="webpage/scripts/js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="webpage/scripts/js/sliderGallerySetup.js"></script>

View 1 Replies View Related

Making A Simple Image Gallery - Combine Two Galleries - Make One Gallery That Contains Both Kinds Of Links?

Jun 30, 2011

how to make the following two simple image galleries:This one displays a specific image when its link is clicked ((URL address blocked: See forum rules)/tests/gallerysimp.html) And this one displays the previous/next image for whatever's showing ((URL address blocked: See forum rules)/tests/prevnext.html). (During its code, it points to this .js file ((URL address blocked: See forum rules) /tests/ nextPrevious.js).)

My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.)

View 12 Replies View Related

Graphical Captions Over HTML Elements

Feb 4, 2005

I got this javascript widget finished the other day. It's called BoxOver and allows floating captions over HTML elements, similar to overlib but uses less CPU and is much smaller (<10kb).
Would be super keen to hear any comments/criticisms on it. Also if anyone has any ideas for changes that would be cool too....

View 19 Replies View Related

Script That Will Generate HTML Description From CSV File

May 9, 2010

I'm trying to figure out the best/easiest/fastest way to accomplish this task:

I have a csv file

I need to generate an HTML item description based on the infomation in this csv

Here is an example:

ITEM NAME, ITEM TITLE, MANUFACTURE, CONDITION, LAST PHOTO LINK,

I would then need the script to generate the HTML markup

AND

I will also need the script to determine if the last photo in the list is photo "c" and then create the links for photos a-c

ie:

I'm sure there is a good way to do this I'm just not sure which language will be the easiest to do it in. If there is a way to use java I am most familiar with java.

I would also like the script to export the data in a csv file as well if possible.

View 1 Replies View Related

Jquery :: Gallery Script Alpha - Highlighted The Area Which Control That Effect

Apr 27, 2011

I have develop a jquery image gallery with text description , image and other thing and its live know. you can check the live gallery Executed for Makkah ! But i am facing some problem in JavaScript coding as i am not a expert init. If you click on any image you can see that new information appear with some effect like fade in or fade out. Which gives very bad impression to my client. I want to remove that effect and want to appear the text immediately without any effect. I am placing the code below and also highlighted the area which control that effect and try myself to edit that one can't able to get the results that i want.

[Code]....

View 4 Replies View Related

JQuery :: Multiple Captions For One Image?

Feb 4, 2011

I have been using Flash to create a slide show that starts with a single image. Then the image caption slides up from the bottom followed by a longer description coming in from the right side of the image (which includes links in the text). The description and caption then slide away, and a new image is transitioned into the old image's place. Is it possible to create something like this with jQuery? The s3slider jQuery plugin is very similar to what I'm looking for, but I can't seem to get two captions to appear over the same image.

View 1 Replies View Related

JQuery :: Rotate The Description Along With Image?

Jan 4, 2010

I am building a site to replicate an existing site for a non-profit.[URL] want to have a rotating image on their home page, and I have it working using the following jQuery Code:

<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 4000);

[code]....

The problem is that I can't figure out how to clear the previous slide's decription (in the <p> tag of each Div). At present the descriptions do rotate, but they are all visible since they are within the stacked Div's. How can I get the descriptions to show and hide in sync with the images?

View 1 Replies View Related

Image Slideshow With Captions Setup

Dec 23, 2009

I'm trying to setup and image slideshow with captions. I can't it to work so far.
Here is a code snippet:
Javascript
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '1.gif'
Pic[1] = '2.gif'

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)
}

Html
<body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()">
<img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" />

View 7 Replies View Related

Making A Simple Image Gallery - When The User Clicks A Thumbnail, The Image Loads Where The Previous Big Image Was?

Feb 2, 2010

I want to have a big image and say 5 small thumbnails underneath. When the user clicks a thumbnail, the image loads where the previous big image was. Is there a standard way to do this?

View 3 Replies View Related

JQuery :: Display Captions Based On Mouseover Of A Certain Part Of An Image?

Jan 28, 2011

I have an interesting project that I'm sure someone has done before. I need to essentially recreate the effect on the Bing homepage where you can mouseover different parts of an image and be displayed different tool tips depending on where your cursor is.

[Code]...

I don't want to use Flash for these things unless I absolutely have to. It seems they could be done with CSS purely but I was wondering if there is a more attractive/prettier way to do it with Jquery?

View 1 Replies View Related

Lightbox2 Image Gallery - The Image Thumbs Are Showing Up But The Larger Images Are Not?

Oct 14, 2009

I am trying to incorporate Lightbox2's image gallery script into my site but I'm having difficulty.Here's where I'm accessing the script from: http:[url]....

The image thumbs are showing up but the larger images are not. I changed the 'body onload' html tag to window.onload as I'm using two different javascripts on this page and I don't want them to conflict.I've also added initLightbox() so I don't know what's wrong! Is there just an issue with the images or is there something wrong with the script.

<script type="text/javascript">
window.onload = function(){ // use this instead of <body onload …>
MM_preloadImages(MM_preloadImages('../3websites/home4.jpg','../3websites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../3websites/photos1.jpg'); initLightbox()")
}
</script>

View 2 Replies View Related

Simple Image Gallery With A Large Image And A X Amount Of Thumbnails At One Off The Sides?

Feb 13, 2011

I'm looking for a very simple image gallery solution (no lightbox or something other fance) with a large image and a x amount of thumbnails at one off the sides, where the big image change whenever another thumbnail is clicked, without page refresh. ( a fade transition would be nice)!Which Plugin, preferably as light as possible, is the most suitable for this task?

View 3 Replies View Related

JQuery :: Image Gallery Set Up For Thumbnails To Populate A Larger Image

Feb 19, 2011

I have the basic image gallery set up for thumbnails to populate a larger image... i uploaded it quick, take a look: [url]

Only thing i need to do is make the next and back buttons work...i know its something simple im missing if you bring up the firebug console i have several console logs on the next button.

View 6 Replies View Related

Image Swap - Thumbnail The Larger Image Will Go Into The Viewing Area

Jan 14, 2009

I am trying to put together a purse shopping site - I would like to have the various views of the same purse in thumbnails under one image then when the customer clicks on the thumbnail the larger image will go into the viewing area. The general layout is like this page - [URL] So when someone clicks on the smallest image I would like it to replace the other image on the page and the larger image becomes the thumbnail. How is this accomplished?

View 2 Replies View Related

JQuery :: Image Preview Gallery Image Loader?

May 17, 2011

I am brand new to JQuery but love it already. I have a couple of questions about a image effect I have found on a site and have used in my website. I found it herehttp://www.htmldrive.net/items/show/136/Image-Preview-Gallery and you can see how I am using it [URL]... The problem I have is. Is there anyway to add a per-loader into the jquery while theimage loads as the images I am using are larger then what the person that made used and the images are taking a little while to load. and also when you click the image it takes you to a new page with just the image on it is there a way to stop it from doing that?

View 9 Replies View Related

Create Html Area For Map?

Mar 7, 2010

I have had success using html maps and areas. The way I have done it in the past is to simply write the map tags, then inside that, put the area tags.

My current problem however, is a bit more complicated. I want to create the areas for a particular map with javascript. I will have the following map:

<map id="pm0102" name="pm0102"> <area name="area" id="pa01021" shape="poly" alt="Sun" onclick="alert('bla')"/></map>
<map id="pm0102" name="pm0102"></map>

I need to create an area for it. So I first write (inside a function that I call)

map1 = document.getElementById("pm0101")

But how can I now create an area for this map in javascript? Does it go something like the following?

map1.areas = '<area name="area" id="pa01011"/>'

I may need to have multiple areas.

View 1 Replies View Related

Use HTML Inside A Text Area Box?

Jul 29, 2009

I have the following form. The html file was saved on my HD and in true it is a full text.

Now I want to see that file inside the <textarea> when the user on click that link and at the same time shows the textarea (instead onclick checkbox).

<form>
<A HREF="ww_HTMLView.html">ww_HTMLView.html</A>
<input type="checkbox" onclick = "urltxt.style.visibility = (this.checked) ? 'visible' : 'hidden'" />
<textarea name="urltxt" style="visibility:hidden">

View 5 Replies View Related

Add Html Tags To Text Area?

Mar 3, 2010

I have a text area that I want to add simple html formatting buttons to.The user should be able to:- highlight text and click a 'bold' button- highlight text and click 'itallic' button- Add bulleted list- LinkI've looked at a number of WYSIWYG javascript examples, but they seem to accept Microsoft Word formatting, which I dont want

View 3 Replies View Related

Compare Html Text Area Values?

Jul 11, 2011

I have one html text area in my JSP file. when i click on that text area, a pop-up will come, in that pop-up i have list of items. So after selecting a item from that pop-up list, need to click okay. so that text area will update with the selected value.

In this case, i need to compare the first text area value and updated text area value. How can i do that in Java Script.

View 1 Replies View Related

Parse Html Tags Within Text Area Or Div?

Mar 25, 2011

I want to display the content of textarea with html parsed eg. how gmail /yahoo displays its mail contents with all the images loaded, with all the links with hypertext parsing the html. Is there any way to display the same.

View 1 Replies View Related

Image Gallery

Mar 14, 2005

Is javascript suitable for a decent image gallery? I've probably got around 200 photos at the moment, increasing every week.

I've been using JAlbum to create galleries but I'm sick of having hundreds of HTML files (one for each image). I want the thumbnails on the same page as the large image, not all of them, just about 10 or so. That way I'd have 20 pages instead of 200.

Do all of the large images have to be loaded when the page loads or just when the thumbnail is clicked?

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved