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
ADVERTISEMENT
Sep 9, 2011
Have two Instances - One will not display captions. Here are the script pieces for the two.
[Code]....
View 1 Replies
View Related
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
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
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
Sep 27, 2010
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
View 6 Replies
View Related
Mar 22, 2010
I have added the crossslide plugin to show a series of images, I have a couple of image that are too big for the area for these images so the crossslide plugin seems like an excellent option to pan thru images. Crossslide does not support captions though, and captions are absolutely necessary. To get it working for now I have used the cycle plugin for the captions, as I was not able to modify the crossslide plugin to fade captions. But of course, the timing of images changing and captions changing is not exact of eventually they don't match up. Not good.I was able to get the crossslide plugin to show the captions by modifying the plugin code in a small way.On line ~223 of the plugin i
modified this:elm = jQuery(format('<img src="{0}"/>', p.src));
to
elm = jQuery(format('<img src="{0}"/><div class="caption">{1}</div>', p.src, p.caption));
[code]....
View 1 Replies
View Related
Nov 9, 2010
I want to toggle the text in this example: [url]
I am using these sites for the toggle effect: [url] [url]
My javascript looks like this :
My css looks like this:
This is what the html looks like:
I'm trying to get the captions to slide but the <p id="caption"> does not want to slide..when I added in the "ddsfdsfdfg" that slides but not the "p id"..how to get this working.
View 2 Replies
View Related
Dec 6, 2010
I am using the Cycle plugin to handle a slideshow and I have a long caption that I would rather not put in an ALT tag. Is there any other way to display captions using the Cycle plugin? Such as in a paragraph tag?
[Code]...
View 4 Replies
View Related
Aug 2, 2011
I'm very new at this. I'm using jquery within wordpress and I've created an image slideshow with captions. It worked fine. Now I want to include a slide counter. I followed the example here as best I could: [URL]...
This is the code I have:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#ng_slideshow').cycle({
[Code]...
View 2 Replies
View Related
Feb 11, 2011
I canīt get the Captions of the cross slide demo to work.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="xxx.js/jquery.cross-slide.min.js"></script>
<div id="kenburns"></div>
<script>
$(function() {
[Code]...
The images appear and are zooming and sliding but I canīt get the caption work. What I am doing wrong. Wld be great if someone have a solution.
View 1 Replies
View Related
Sep 25, 2010
I'm trying to have the slide move on click but with a counter as well. When I try to incorporate the counter it breaks my test page I'm trying it on. I added captions to the slides and I realize both of them are activated by after.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Image Count Demo</title>
[Code].....
View 2 Replies
View Related
Sep 12, 2010
I'm creating a slider with the Cycle plugin and ran into a little bit of a road block.
What I want to do is simply have anchor links on my slideshow images, which I can get working just fine, except that when I add these anchor links, it removes my image caption (which worked prior to adding anchors on my images)
[Code]...
View 2 Replies
View Related
Jun 23, 2010
i'm having a small problem with getting the captions to display from a slideshow... i've got multiple slideshows on the page which i guess could be causing the problem... i'm not getting any errors, but no caption is being displayed... here is a section of my html....
<script>
$(document).ready(function() {
$('#cat_slide1').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '#next1', prev: '#prev1',
[Code]...
View 3 Replies
View Related
Jul 8, 2011
I am creating a basic page for a client to allow them to update photo captions on their own. The test page is here: [url]
There are only 4 photos right now for testing, but eventually there will be 100's. The issue I'm having is that only the first image caption is being updated. If I edit the caption for photo #4 and click update, it appears to update, but it actually doesn't. Further testing shows if I change the caption for #1 and click submit on ANY other caption, it updates #1. This makes me think that the jQuery code is only referencing the first form.
I know I could use ID's on the forms and in the jQuery to differentiate the forms, however the form HTML code is generated with PHP and there will be 100's of them. Is there any way for jQuery to determine which form was submitted? I need to be able to tell which form was submitted so I can use that form's caption text to update the photo caption via SQL (photo info stored in an SQL database).
Here's the code from the page. The forms are generated via PHP:
View 2 Replies
View Related
Nov 7, 2010
I was trying to apply 2 javascript effects on one image. First, I use this Jquery effect on the image. It works like it should until I put in the light box effect (this is the one I am using. The lightbox also works, it just depends on which order I put them in the code on which one will come through.I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?).Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.CODE
<script type="text/javascript" src="javascript/lightbox/prototype.js"></script>
<script type="text/javascript" src="javascript/lightbox/scriptaculous.js?load=effects,builder"></script>
[code].....
View 1 Replies
View Related
Sep 3, 2011
I am working on a project. I have to put up a tab panel of four option. And in each tab i have to put an image slider. I have used many plugins for this. Tried different plugin for different tab. Few times have problem with tab panel and few time compatibility with all browsers have been issue.
View 1 Replies
View Related
May 6, 2011
I'm newbie on jquery and I hope to help me. i'vea problem to showmultiple stack image. For example, I've a jpeg image map on background and I would like to show multiple pin with multiple coordinates.
View 1 Replies
View Related
Aug 1, 2011
I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work.
However, when adding in another slider, I have only confused the situation.
Below is the html and css. Let me know where I've gone wrong here.
Will I need another set of css classes for each slider?
How do I call a second slider?
The html/javascript:
View 1 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
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
Jul 23, 2005
I just finished developing a javascipt component allowing floating
captions to appear over HTML elements....
View 3 Replies
View Related
Aug 20, 2009
For this page here: [URL]. I have the following code for the photo gallery:
var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){
var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height; .....
IE ? attachEvent('onload', init) : addEventListener('load', init, false);
The pictures change fine, but I can't get the captions to change with them.
View 4 Replies
View Related
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
Jun 4, 2010
I used the tutorial here to create a slideshow but would like to add captions... with the code? Below is part of the script I used... (there are 27 images so I cut it short...
Head code:
View 1 Replies
View Related
