Alt tekst overnemen als extra tekstregel

kijk eens naar jQuery attr()

Dank je Vincent,

Mijn gevoel zegt dat het dan hier ergens moet komen:

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

Kan je me een tip geven waar? En kan ik daar dan zoiets plaatsen als:

.attr("alt"); (en niet meer dan dat?)

het zal meer iets zijn van:

$("#divvoorhettextje").html($("jeplaatjenaam").attr("alt"));

Oké,

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.

de #divvoorhettextje zal in jou plaatje de div met de tekst "hier dus de tekst die ook in de alt staat". De "jeplaatjenaam" kan je het id van je foto invullen.

wanneer je je foto het id "mijnfoto" geeft vul je daar dus "#mijnfoto" in

Ik heb nu dit:

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 heel wat zoek werk en omzwervingen heb ik resultaat bereikt.

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:

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.

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