|
JavaScript - Adding An Alt Tag On A Carousel Banner Image (.js)
I'm having the same trouble with adding an ALT tag to the last image:
var imageList = [ "images/banner/banner1.jpg", "images/banner/banner2.jpg", "images/banner/banner3.jpg", "images/banner/banner4.jpg", "images/banner/banner4.jpg", ]; Can anyone help? Similar Tutorials-edit - nevermind. mods plz delete.
I have a banner that has image navigation on the lower right. The navigation links are images which, when clicked, change the banner without reloading the page. The actual switching of the banner is working when each image is clicked. However, my problem is this: The page itself is long and must be vertically-scrolled to see the entire content. Because of the scrolling, the banner could appear anywhere vertically on the page. And whenever I click the banner navigation hrefs, the page "jumps" so that the banner is at the top. The page should really stay in the fixed position. I'm not sure how to set it up so that no matter where the banner section is on the scrolled page, that the page stays in the same position when the navigation is clicked. My href's in that navigation are set up as : <a href="#"></a> Do I need something in my script so that the page won't jump? Or am I missing something in the HTML? I am using the Carousel II Horizontal and it clearly says "Each image hyperlinked and opens in same browser." However, once you click on the image it opens a new browser. I am using this in an online store and I do not want my customers to open a new browser when viewing the product, I want them to click on image to go directly to the product to purchase. Any help? Thanks, Candy so i have to use the addEvent() to call the makeBannerAd function which i believe i have done so.... but then i gotta <div id = "bannerBox"> </div> and loop through all the iteams in my adsURL Array and for each item i must create the html fragment <div class = "bannerAd"> <a href = "url"> <img src = "bannerindex" /> </a> </div> i must set the z index number to each number ad to the value of the counter index and append the banner ad to the banner Box element.....Append the bannerBox to the documentbody, run the changeBannerAd() every 10 sec Banners.js Code: //this is the global scope here when you declare out side of a function it because global or at the top of the js file
var nextAd; //this is going to be used to change or show the next banner ad to the web page
function addEvent(object, evName, fnName, cap)
{
makeBannerAds();
if (object.attachEvent)
{
object.attachEvent("on" + evName, fnName);
}//end if
else if (object.addEventListener)
{
object.addEventListener(evName, fnName, cap);
}//end else if
}//end function addEvent
function makeBannerAds()
{
//this creates a banner box to store the banner ads in
var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";
for(var i = 0; i < document.adsURL.length; i++)
{
if(adsURL[i] != <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>)
{
if
(adsURL[i] = <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>)
else
return adsURL[i] = <div class = "bannerAd">,
<a href ="url">,
<img src ="bannerindex" />,
</a>,
</div>;
}//end if
}//end if
}//end function makeBannerAds
ads.js Code: function storeURL()
{
//this creates a new array, the array is called adsUR:
var adsURL = new Array();
//this stores each item in the array using a index place holder
adsURL[0] = "testpage0.htm";
adsURL[1] = "testpage1.htm";
adsURL[2] = "testpage2.htm";
adsURL[3] = "testpage3.htm";
adsURL[4] = "testpage4.htm";
adsURL[5] = "testpage5.htm";
adsURL[6] = "testpage6.htm";
adsURL[7] = "testpage7.htm";
adsURL[8] = "testpage8.htm";
adsURL[9] = "testpage9.htm";
adsURL[10] = "testpage10.htm";
adsURL[11] = "testpage11.htm";
}//end function storeURL
books.html file Code: <head>
<!--
-->
<title>Online Bookworms</title>
<link href="bw.css" rel="stylesheet" type="text/css" />
<link href="bannerstyles.css" rel="stylesheet" type="text/css" />
<script src ="ads.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
<script src ="banners.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
</head>
<body>
<div id="page">
<h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Book Swaps</a></li>
<li><a href="#">OBW Store</a></li>
<li><a href="#">Author's Corner</a></li>
<li><a href="#">My Account</a></li>
</ul>
<ul id="menu2">
<li><a href="#">My Reading List</a></li>
<li><a href="#">Review a Book</a></li>
<li><a href="#">Join a Discussion</a></li>
<li><a href="#">Post to a Forum</a></li>
<li><a href="#">My Mail</a></li>
<li><a href="#">My Posts</a></li>
<li class="newgroup"><a href="#">Reading Recommendations</a></li>
<li><a href="#">Books of the Month</a></li>
<li class="newgroup"><a href="#">MP3 Downloads</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">RSS Feeds</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">About online BookWorms</a></li>
</ul>
<div id="main">
<h2>Welcome</h2>
<p>Welcome to <strong>online BookWorms</strong> — your location on
the Web for books, magazines, short stories, poetry, and essays.
Please explore our online bookstore for the lowest prices on new
and rare books. Share your love of reading by joining one of our
many forums and discussion groups. Are you an aspiring critic?
We welcome book reviews and essays on your favorite authors and
works.
</p>
<h2>News</h2>
<p>We are very happy to introduce the <a href="#">online BookWorms
Podcast</a>. The podcast will contain free excerpts from great
works of fiction and reviews of current books. You can quickly
subscribe to this new BookWorms feature <a href="#">here</a>.
</p>
<p>Take a few moments now to explore our book shelves. And remember to
patronize our sponsors by clicking the banner ads at the top of the
page. Enjoy browsing our site!
<p id="signature">
<img src="signature.jpg" alt="Helen Ungerstatz" />
</p>
</div>
</div>
</body>
</html>
Can anyone direct me to the source of this carousel or something similar? http://www.murdockyoung.com/projects...-house/images/ Thanks in advance! How do you make a vertical carousel that displays either text or images?
Hi All I've been following an example on how to build an interactive carousel, but I am unable to get the javascript to make the carousel loop continously. I've posted all the code below, if anyone can show me the error I would be very grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interactive Carousel</title>
<style type="text/css">
#feature_holder{position:relative; top:150px; overflow:hidden; height:400px; width:100%;}
.feature{position:absolute; width:1000px; height:400px; top:0; z-index:1;}
.arrow_right{right:20px;}
.arrow_left{left:20px;}
.arrow{height: 70px; width:70px; z-index:2; top:160px; position:absolute; background:#000;}
#feature_1{background: #666666;}
#feature_2{background: #225566;}
#feature_3{background: #006600;}
#feature_4{background: #ff0066;}
#feature_5{background: #00ff00;}
#feature_6{background: #0380ff;}
</style>
</head>
<body>
<div id="feature_holder">
<div class="arrow arrow_left"></div>
<div class="arrow arrow_right"></div>
<div class="feature" id="feature_1"></div>
<div class="feature" id="feature_2"></div>
<div class="feature" id="feature_3"></div>
<div class="feature" id="feature_4"></div>
<div class="feature" id="feature_5"></div>
<div class="feature" id="feature_6"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
var BrowserWidth
var FeatureCount
var CurrentFeature = 1
var NextFeature
var NextNextFeature
var PrevFeature
var PrevPrevFeature
$(document).ready (function(){
setFeatureCount()
getBrowserWidth()
setClicks()
setNextPrev()
setFeaturePosition()
});
setFeatureCount = function(){
FeatureCount = $('#feature_holder').children('.feature').length;
}
getBrowserWidth = function(){
BrowserWidth = $(window).width();
}
setClicks = function(){
$('#feature_holder').children('.arrow_left').click(function(){
SlideInFeature(true);
});
$('#feature_holder').children('.arrow_right').click(function(){
SlideInFeature(false);
});
}
setNextPrev = function(){
PrevFeature = (CurrentFeature-1);
PrevPrevFeature = (CurrentFeature-2);
NextFeature = (CurrentFeature+1);
NextNextFeature = (CurrentFeature+2);
if (CurrentFeature == 1){
PrevFeature = FeatureCount;}
setFeaturePosition = function(){
$('#feature_holder').children('.feature').css('left', -9999);
var CurrentPositioning = (BrowserWidth/2) - 500;
$('#feature_'+CurrentFeature).css('left', CurrentPositioning);
var NextPositioning = (BrowserWidth/2) + 500;
$('#feature_' +NextFeature).css('left', NextPositioning);
var PrevPositioning = (BrowserWidth/2) - 1500;
$('#feature_'+PrevFeature).css('left', PrevPositioning);
}}
</script>
</body>
</html>
Thanks Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Hello, I was wondering if anyone knew how to alter SmoothGallery to move the thumbnail carousel from a horizontal one along the top to a vertical one along the right side. It's supposedly possible within the core code, and I've seen it done, but it's not in the documentation and no one on the SmoothGallery forums seems to know how to do it. Ultimately, I'd like to move the carousel to the right side, make it static so that it's always overlaying the main image (rather than clicking to unhide it), and make sure the slideInfoZone is adjusted so as to not overlap with the carousel. I'm assuming that anyone who knows how to do it has SmoothGallery and has made the carousel vertical before... but if not, and someone wants to take a crack at it anyway, the SmoothGallery files are HERE. Thanks for your help in advance! hi, on my website: http://zend.warrencreative.com/gemini-group/index.html the carousel on the right is not showing unless you hover your mouse over?! Can some one please help? I am using : http://www.twospy.com/galleriffic/ My website is: ERBoH.com I have no experience with JS, just general knowledge of html/css. I had someone else write the site for me. They didn't know how to do this and pretty much just stopped talking to me... On my site, I have a video carousel (4 video thumbnails in a row, you press the > arrow, and it shows the next 4 video thumbnails, you click 1 video thumbnail, and it shows you the video above the carousel). The problem is, when you click on one of the thumbnails, it reloads the page, and the video carousel goes back to the beginning. So if you clicked the > arrow 3 times (ur on the 3rd set of thumbnails), then it brings you back to the 1st set. This is pretty annoying, especially if your planning on watching each video. My question is, is it possible to make some type of cookie or something to remember which set of thumbnails you were on in the carousel? So that, if your on the 3rd set, and click a video, instead of resetting to the 1st set, it keeps you on the 3rd set. If it is possible... how hard would it be to do? Is it something where I could just copy/paste a string of code, or would this be a huge project? Thanks for the advice. Hello, I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect? Thanks, Creations_Kash Carousel Slideshow (http://www.dynamicdrive.com/dynamicindex14/carousel.htm) in Internet Explorer functions all right (top center of screen). But same Carousel in Firefox and Chrome is shown top left of screen and I do not know how to center it. How can I solve this problem ? Thank you very much for your help. pro298 Hi Javascript geeks. I am hoping you can help with my shakey images on my carousel. Basically I have a lovely moving carousel on this web page http://www.turningworm.co.uk/nudgegl...nge/icons.html but the images kind of shudder as they come to a stand still before the pause. Does anyone know of a way to smooth the movement out so they glide round better and then pause? The speed is correct, it is just the shakiness of the images that is the problem. Many thanks for looking. Zena I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working. When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them. I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar. I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck! Could anyone help? I have attached the code showing the html, the custom.js function and the css. Thanks, nevblanc79 HTML: Code:
<div id="carousel">
<h3>Our Titles</h3>
<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
Javascript: Code: $(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
CSS: Code: #carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}
.carousel ul li {
width:198px;
margin-right:36px;
}
#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}
#carousel .next {
float:right;
}
#carousel .prev {
float:left;
}
On my website http://smstext.jigowatt.co.uk i have a menu which when you hover over certain parts popups with information. I have designed a Mooflow document that I want to popup instead (i will design a different one for each section). I cant get it to show up when you hover? I am trying to add a php link in the javascript file that links the hover images. This is my code at the moment Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["http://i1189.photobucket.com/albums/z423/creativeedge1/Golf-Popup1.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
When I am trying to link the php I use this code Code: var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=[<link href="<?php bloginfo('template_directory'); ?>/index2.php", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[1]=["http://i1189.photobucket.com/albums/z423/creativeedge1/hospitals_popup_copy.gif", "", {background:"#FFFFFF", color:"black", border:"2px ridge #0099FF"}]
tooltips[2]=["../dynamicindex14/winter.jpg"]
tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
Obviously I am doing something wrong but I'm not sure what!?? Help Please Figured this out (I think)
Hi all, I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript. This is a part of my javascript code that is in the head and body of my HTML file: Code: <head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
function redClick( buttonLocation ) {
window.location = "http://www.yahoo.com/"
}
....
....
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>
The image that is displayed is not clickable, and therefore the function redClick cannot be called. Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript. Thanks! Hello! A client of mine wanted a picture slideshow like this website. http://themeforest.net/item/dark-atl..._preview/50415 I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this. Can anyone help? I did find this: http://sorgalla.com/jcarousel/ but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated Kristen http://www.twitter.com/kris10ized I cant seem to get the top picture carousel to work i think this is my problem but Im not sure what in th coding needs to change: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:17 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:28 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js |
|||||||