Alt tekst overnemen als extra tekstregel
Op een ander forum heb ik onderstaande vraag al gesteld, maar daar komt geen antwoord. Hopend dat hier wat mensen zijn die Javascript beheersen plaats ik het hier even.
Ik heb op het web een eenvoudige Slide gevonden waarvan onderstaand het Javascript. Ik heb over het algemeen niet meer dan 10 afbeeldingen en wil graag dat naast die rode knoppen (bij mij roze) de alt tekst getoont wordt van de afbeelding. Hier dus:
Nu ben ik een enorme noob op het gebied van Javascript, dus hier de brutale vraag...
Kan iemand me daarmee helpen?
De slide viewer komt van hier: slide viewer
en dit is het script. Alvast bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
jQuery(function(){
jQuery("div.svw").prepend("<img src='spinner.gif' class='ldrgif' alt='loading...'/ >");
});
var j = 0;
var quantofamo = 0;
jQuery.fn.slideView = function(settings) {
settings = jQuery.extend({
easeFunc: "easeInOutExpo",
easeTime: 750,
uiBefore: false,
toolTip: false,
ttOpacity: 0.9
}, settings);
return this.each(function(){
var container = jQuery(this);
container.find("img.ldrgif").remove();
container.removeClass("svw").addClass("stripViewer");
var pictWidth = container.find("img").width();
var pictHeight = container.find("img").height();
var pictEls = container.find("li").size();
var stripViewerWidth = pictWidth*pictEls;
container.find("ul").css("width" , stripViewerWidth);
container.css("width" , pictWidth);
container.css("height" , pictHeight);
container.each(function(i) {
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
return false;
});
});
container.bind("click", function(e){
var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current");
var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) + parseFloat(jQuery(this).css('borderRightWidth').replace("px", ""));
var dOs = jQuery(this).offset();
var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left);
if(zeroLeft >= pictWidth/2) {
var uiprev = ui.parent().prev().find("a");
(jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click");
}
else {
var uinext = ui.parent().next().find("a");
(jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click");
}
});
jQuery("div#stripTransmitter" + j).css("width" , pictWidth);
jQuery("div#stripTransmitter" + j + " a:first").addClass("current");
jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>');
if(settings.toolTip){
var aref = jQuery("div#stripTransmitter" + j + " a");
aref.live('mousemove', function(e) {
var att = jQuery(this).attr('title');
posX=e.pageX+10;
posY=e.pageY+10;
jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity});
});
aref.live('mouseout', function() {
jQuery('.tooltip').hide();
});
}
Mijn gevoel zegt dat het dan hier ergens moet komen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
container.each(function(i) {
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
return false;
});
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
return false;
});
Kan je me een tip geven waar? En kan ik daar dan zoiets plaatsen als:
.attr("alt"); (en niet meer dan dat?)
Code (php)
1
$("#divvoorhettextje").html($("jeplaatjenaam").attr("alt"));
Die #divvoorhettextje zal zijn voor de opmaak en om hem ergens te kunnen plaatsen.
Maar wat met die "jeplaatjenaam"?
Die attr("alt") haalt dan de alt op van de afbeeling...toch?
Die regel al eens her en der geplaatst. Foutmelding geeft het niet. Maar ook geen output, al zal dat vast logisch zijn.
Gewijzigd op 10/05/2011 11:31:05 door Marc rc is as
wanneer je je foto het id "mijnfoto" geeft vul je daar dus "#mijnfoto" in
Code (php)
1
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li> " + $("div#alttext").html($("alttext").attr("alt"));
Maar dat werkt niet. Ook niet zonder het eerste dollar teken
Na dezelfde vraag gesteld te hebben op een ander Javascript forum kreeg ik een tweetal links toegestuurd met een deel van de oplossing. Iemand had een dergelijke vraag ook al eens gehad opStackOverflow.
De oplossing die hier gegeven werd was prima echter voor slideviewer 1.1. Normaal gezien zou de versie me niet zoveel uitmaken, maar deze versie werkt niet op IE7 en 8. Dus heb ik met wat puzzelwerk van de nieuwe versie en deze oplossing 1 werkend geheel gemaakt.
Het enige probleem wat ik toen nog had is dat de tekst bij de eerste foto niet werd geplaatst. Die puzzel kon ik maar niet oplossen, de volgemde afbeeldingen in de slider hadden nl wel de juiste tekst. De vraag daarvoor heb ik toen opnieuw gesteld op het Belgisch Javascript forum
En opnieuw kwam daarvan de juiste oplossing:
Voeg daarvoor net voor jQuery("div#stripTransmitter" + j + " a").each(function(z) { volgende regel in:
Code (php)
1
var altText = $(this).find("img").eq(0).attr("alt"); $("#caption").html(altText).fadeIn("slow");
Om jullie de oplossing niet te onthouden (daar is een forum tenslotte voor) hieronder de uiteindelijke code voor een "mooie" alttekst toevoeging in slideviewer 1.2. De default CSS kan je van de site van Slideviewer halen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
jQuery(function(){
jQuery("div.svw").prepend("<img src='spinner.gif' class='ldrgif' alt='loading...'/ >");
});
var j = 0;
var quantofamo = 0;
jQuery.fn.slideView = function(settings) {
settings = jQuery.extend({
easeFunc: "easeInOutExpo",
easeTime: 750,
toolTip: false
}, settings);
return this.each(function(){
var container = jQuery(this);
container.find("img.ldrgif").remove(); // Removes the preloader gif
container.removeClass("svw").addClass("stripViewer");
var pictWidth = container.find("img").width();
var pictHeight = container.find("img").height();
var pictEls = container.find("li").size();
var stripViewerWidth = pictWidth*pictEls;
container.find("ul").css("width" , stripViewerWidth);
container.css("width" , pictWidth);
container.css("height" , pictHeight);
container.each(function(i) {
var altTextstart = $(this).find("img").attr("alt");
$("#caption").html(altTextstart);
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><div id='caption'><p></p></div><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div><div id='caption'><p></p></div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
var altText = $(this).find("img").eq(0).attr("alt"); $("#caption").html(altText).fadeIn("slow");
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
$("#caption").html(altTextstart).hide();
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current");
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc,function(){
// z is the index of the currently showing picture,
// It comes from the .each call above
var altText = $(this).find("img").eq(z).attr("alt"); // Get alt value
// Now insert the text from the alt value
$("#caption").html(altText).fadeIn("slow");
});
return false;
});
});
jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) {
jQuery(this).bind("click", function(){
var ui = jQuery(this).parent().parent().parent().next().find("a");
if(z+1 < pictEls){
ui.eq(z+1).trigger("click");
}
else ui.eq(0).trigger("click");
});
});
jQuery("div#stripTransmitter" + j).css("width" , pictWidth);
jQuery("div#stripTransmitter" + j + " a:first").addClass("current");
jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>');
if(settings.toolTip){
var aref = jQuery("div#stripTransmitter" + j + " a");
aref.live('mousemove', function(e) {
var att = jQuery(this).attr('title');
posX=e.pageX+10;
posY=e.pageY+10;
jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity});
});
aref.live('mouseout', function() {
jQuery('.tooltip').hide();
});
}
});
j++;
});
};
jQuery("div.svw").prepend("<img src='spinner.gif' class='ldrgif' alt='loading...'/ >");
});
var j = 0;
var quantofamo = 0;
jQuery.fn.slideView = function(settings) {
settings = jQuery.extend({
easeFunc: "easeInOutExpo",
easeTime: 750,
toolTip: false
}, settings);
return this.each(function(){
var container = jQuery(this);
container.find("img.ldrgif").remove(); // Removes the preloader gif
container.removeClass("svw").addClass("stripViewer");
var pictWidth = container.find("img").width();
var pictHeight = container.find("img").height();
var pictEls = container.find("li").size();
var stripViewerWidth = pictWidth*pictEls;
container.find("ul").css("width" , stripViewerWidth);
container.css("width" , pictWidth);
container.css("height" , pictHeight);
container.each(function(i) {
var altTextstart = $(this).find("img").attr("alt");
$("#caption").html(altTextstart);
(!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><div id='caption'><p></p></div><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div><div id='caption'><p></p></div>");
jQuery(this).find("li").each(function(n) {
jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");
});
var altText = $(this).find("img").eq(0).attr("alt"); $("#caption").html(altText).fadeIn("slow");
jQuery("div#stripTransmitter" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
$("#caption").html(altTextstart).hide();
jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current");
var cnt = -(pictWidth*z);
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc,function(){
// z is the index of the currently showing picture,
// It comes from the .each call above
var altText = $(this).find("img").eq(z).attr("alt"); // Get alt value
// Now insert the text from the alt value
$("#caption").html(altText).fadeIn("slow");
});
return false;
});
});
jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) {
jQuery(this).bind("click", function(){
var ui = jQuery(this).parent().parent().parent().next().find("a");
if(z+1 < pictEls){
ui.eq(z+1).trigger("click");
}
else ui.eq(0).trigger("click");
});
});
jQuery("div#stripTransmitter" + j).css("width" , pictWidth);
jQuery("div#stripTransmitter" + j + " a:first").addClass("current");
jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>');
if(settings.toolTip){
var aref = jQuery("div#stripTransmitter" + j + " a");
aref.live('mousemove', function(e) {
var att = jQuery(this).attr('title');
posX=e.pageX+10;
posY=e.pageY+10;
jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity});
});
aref.live('mouseout', function() {
jQuery('.tooltip').hide();
});
}
});
j++;
});
};
Gewijzigd op 12/05/2011 15:27:43 door Marc rc is as