PDA

View Full Version : Help required - Want to add Image ALT tag and Image Title Tag in Slide show images



davidjohny
10-13-2016, 03:17 PM
I know it is easy for most of you but I have no idea how to do it.
I want to add an ALT tag and Title tag to my images rotating inside a slide show.
I think it is a Java Script.
Below is my full script for the Slide show.
========================================================

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [900, 170], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/p1.jpg", "http://www.mywebsite.com/Page1.php", "", ""],
["images/p2.jpg", "http://www.mywebsite.com/Page2.php", "", ""],
["images/p3.jpg", "http://www.mywebsite.com/Page3.php", "", ""],
["images/p4.jpg", "http://www.mywebsite.com/Page4.php", "", ""],
["images/p5.jpg", "http://www.mywebsite.com/Page5.php", "", ""]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "3cf62992-1901-4ad5-92ee-cba7628d80f2", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>


<script type="text/javascript">
<!--

var numbers='1234567890'

function alpha(e,allow) {
var k;
k=document.all?parseInt(e.keyCode): parseInt(e.which);
return (allow.indexOf(String.fromCharCode(k))!=-1);
}

// -->
</script>

========================================================

jscheuer1
10-13-2016, 03:53 PM
If this is the Dynamic Drive script I'm pretty sure it is, you need to have the script credit for it in the source code of your page. That's part of the Terms of Usage for the script. Please reinstate the script credit first.

I think you mean this script:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Which version are you using? In any case, if you are using that script you can add descriptions and have them visible always, which would eliminate the need for those attributes. Otherwise we can add them using javascript after the slideshow is initialized.

davidjohny
10-13-2016, 04:57 PM
I paid money to a programmer to get that script on my website. So, I have no idea how it works and from
where that person from India originally got that script.

I am not good in programming and that is the reason I am here to ask help.
About adding website name, I can do it if you tell what to write where.

Anways, back to my old question, I want to just add ALT Image tag. How to do it?

jscheuer1
10-13-2016, 06:12 PM
People are allowed to charge you for Dynamic Drive code - well not for the code, but for setting it up for you. They are, however, supposed to keep the script credit visible in the source code of the page.

Since you don't know what script you have, I would need a link to your page to tell you the answer for sure. It looks exactly to me like the DD script I linked to, but I cannot be 100% certain. To answer your question about where the credit would go (assuming this is the DD script I think it is), where you have:


<script type="text/javascript" src="fadeslideshow.js">

</script>

It should be:


<script type="text/javascript" src="fadeslideshow.js">

//***********************************************
//* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* Please keep this notice intact
//* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
//***********************************************/

</script>

And, if it is the DD script I think it is, to get alts and titles, change this:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [900, 170], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/p1.jpg", "http://www.mywebsite.com/Page1.php", "", ""],
["images/p2.jpg", "http://www.mywebsite.com/Page2.php", "", ""],
["images/p3.jpg", "http://www.mywebsite.com/Page3.php", "", ""],
["images/p4.jpg", "http://www.mywebsite.com/Page4.php", "", ""],
["images/p5.jpg", "http://www.mywebsite.com/Page5.php", "", ""]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>

to:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [900, 170], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/p1.jpg", "http://www.mywebsite.com/Page1.php", "", "", ["alt for 1st image", "title for 1st image"]],
["images/p2.jpg", "http://www.mywebsite.com/Page2.php", "", "", ["alt for 2nd image", "title for 2nd image"]],
["images/p3.jpg", "http://www.mywebsite.com/Page3.php", "", "", ["alt for 3rd image", "title for 3rd image"]],
["images/p4.jpg", "http://www.mywebsite.com/Page4.php", "", "", ["alt for 4th image", "title for 4th image"]],
["images/p5.jpg", "http://www.mywebsite.com/Page5.php", "", "", ["alt for 5th image", "title for 5th image"]]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
oninit: function(){
var s = this.setting, ir = s.imagearray, l = ir.length;
s.$gallerylayers.find('img').each(function(i, im){
jQuery(im).attr({alt: ir[i % l][4][0], title: ir[i % l][4][1]});
});
},
togglerid: ""
})


</script>

If you want more help, please provide a link to the page on your site that contains the problematic code.

davidjohny
10-13-2016, 07:45 PM
<script type="text/javascript" src="fadeslideshow.js">

//***********************************************
//* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
//* Please keep this notice intact
//* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
//***********************************************/

</script>

Okay, I will add the above code:


The keyword for the ALT tag and Title Image that I want to use is "Online Books"
See below: Is this the correct way to use it?

Your example: ["images/p1.jpg", "http://www.mywebsite.com/Page1.php", "", "", ["alt for 1st image", "title for 1st image"]],

My example: ["images/p1.jpg", "http://www.mywebsite.com/Page1.php", "", "", ["Online Books", "Online Books"]],

jscheuer1
10-13-2016, 09:28 PM
That's right. There are also other additions to the code, specifically the oninit function, that must also be used. But assuming you've copied all that I gave you, again - yes that's right, that's where you would edit to get the alt and title attributes that you want.