Haven't issue with seeing ALT with Image in JQuery

Question

LastMitch

12 Years Ago

Hi,

This is the first script that I trying to read and learn how it function. I not very familiar with JQuery. I'm more in PHP. But I notice other members know other languages beside PHP. So I'm trying to do what other Developer are doing which is knowing another languages.

This is a simple JQuery image code that I found online. The issue is that I am trying to make the ALT appear with the image at the same time. So what I did I add .text(this.alt) to make the text appear but it won't work.

Here is the code:

<!DOCTYPE html> 
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<style>
.slideshow img { display: none; cursor: pointer; }
</style>
<script type="text/javascript">

jQuery(function($){

//click image goes to previous slide    
$('a.prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
});

//click image goes to next slide
$('a.next, .slideshow img').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));
});

//initialize show
iniShow();

function iniShow() {
//show first image
    $('.slideshow').each(function() {
        $(this).find.text(('img:first').fadeIn(500).alt)
    })
}

//show previous slide with caption
function prevSlide($slides) {
    $slides.find('img:last').text(this.alt).prependTo($slides);
    showSlide($slides);
}

//show next slide with caption
function nextSlide($slides) {
    $slides.find('img:first').text('').appendTo($slides);
    showSlide($slides);

}

//show slides
function showSlide($slides) {

//hide (reset) all slides with caption
    $slides.find('img').hide().text('');

//fade in next slide caption
    $slides.find('img:first').text('').fadeIn(500);
}
});
</script>
<body>
<div class="slideshow">
    <div class="slides">
        <img src="images/01.jpg" width="300" height="500" alt="Caption 1 Image is ..." />
        <img src="images/02.jpg" width="200" height="500" alt="Caption 2 Image is ..." />
        <img src="images/03.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
        <img src="images/04.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
    </div>
    <div class="controls">
    <a class="prev" href="javascript:void(0);">Previous</a> |
    <a class="next" href="javascript:void(0);">Next</a>
    </div>
</div>
</body>
</html>

Any suggestions and explanation would be appreciated. So I can see what I did wrong. Thanks!

image javascript jquery

Edited 12 Years Ago by LastMitch because: grammer

4 Contributors
19 Replies
450 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by LastMitch

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

Where do the dollar signs come from in this snippet?

//show previous slide with caption
function prevSlide($slides) {
    $slides.find('img:last').text(this.alt).prependTo($slides);
    showSlide($slides);
}

PHP uses them in front of variables, Javascript doesn't.

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

Sorry for the confusing, missed something I guess.

What I wonder about is why are you trying to set the text of an image. Image doesn't have a text property. You should add a div to hold your text (at the position you want it), and use that to display the matching alt texts. That would solve your issue IMO.

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

You just need one placeholder, which displays the alt text of the image currently shown. For example:

<div class="slides">
<img src="images/01.jpg" width="300" height="500" alt="Caption 1 Image is ..." />
<img src="images/02.jpg" width="200" height="500" alt="Caption 2 Image is ..." />
<img src="images/03.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
<img src="images/04.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
</div>
<p id="caption"></p>

Then where you switch the image you need something like this:

$('#caption').text(this.alt);

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

this is not pointing to the current image. You may need to use:

$('#caption').text($slides.find('img:first').attr('alt'));

LastMitch commented: Thanks for the explantion +5

JJenZz 36 Newbie Poster

12 Years Ago

This should achieve what you are trying to do:

jQuery(function($){
    //clicking prev button goes to previous slide
    $('.slideshow .prev').click(function() {
        prevSlide($(this).closest('.slideshow').find('.slides'));
    });

    //clicking next button or image goes to next slide
    $('.slideshow .next, .slideshow img,').click(function() {
        nextSlide($(this).closest('.slideshow').find('.slides'));
    });

    //initialize show
    iniShow();

    function iniShow() {
        // show first slide with caption
        $('.slideshow').each(function() {
            showSlide($(this).find('.slides'));
        });
    }

    // move previous slide to top of stack and call showSlide
    function prevSlide($slides) {
        $slides.find('img:last').prependTo($slides);
        showSlide($slides);
    }

    // move next slide to top of stack and call showSlide
    function nextSlide($slides) {
        $slides.find('img:first').appendTo($slides);
        showSlide($slides);
    }

    // show slide with caption
    function showSlide($slides) {
        var $nextSlide = $slides.find('img:first');

        //hide (reset) all slides
        $slides.find('img').hide();
        //fade in next slide
        $nextSlide.fadeIn(500);
        //show caption
        $('#caption').text($nextSlide[0].alt);
    }
});

Edited 12 Years Ago by JJenZz

LastMitch commented: Thanks for the code! +5

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

LastMitch · Answer 1 · 2012-09-27T14:39:47+00:00

@pritaeas

Where do the dollar signs come from in this snippet?

It's from script I download from another site.

PHP uses them in front of variables, Javascript doesn't.

I know PHP used that I didn't know Javascript don't used that.

The script is in JQuery, when I set it up to run correctly I put this:

jQuery(function($){}

without this, the JQuery script won't run. So that's the only thing I know. This is the first script I actually took time to play around with. The past few night I search online to find small code to plug in to that script above. I don't know much about JQuery

blocblue 238 Posting Pro in Training Featured Poster · Answer 2 · 2012-09-27T15:03:16+00:00

You'll want to use the .attr function.

$slides.find('img:last').attr('alt', this.alt).prependTo($slides);

LastMitch · Answer 3 · 2012-09-27T15:12:08+00:00

@pritaeas

Image doesn't have a text property. You should add a div to hold your text (at the position you want it), and use that to display the matching alt texts.

You mean something like this:

<p id="caption"></p>

Would it be easier I used an Array? I mean PHP array to echo out the caption. Will this script still function if I also used PHP?

LastMitch · Answer 4 · 2012-09-27T15:16:16+00:00

@blocblue

Thanks for the reply and example.

.attr function I never heard of it but I will make some adjustment.

I will test it out and let you know how it goes. Thanks!

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2012-09-27T15:31:37+00:00

The paragraph you provided is a placeholder, where you copy the alt tag of the image (you already have) that is currently shown.

LastMitch · Answer 6 · 2012-09-27T22:12:34+00:00

@pritaeas

The paragraph you provided is a placeholder, where you copy the alt tag of the image (you already have) that is currently shown.

You mean this:

<div class="slides">
<img src="images/01.jpg" width="300" height="500" alt="Caption 1 Image is ..." />
<img src="images/02.jpg" width="200" height="500" alt="Caption 2 Image is ..." />
<img src="images/03.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
<img src="images/04.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
</div>

Thanks for the explanation! I will work on it more tonight.

LastMitch · Answer 7 · 2012-09-28T02:21:34+00:00

@blocblue

I try that small code .attr('alt', this.alt) and I put it in

$slides.find('img:first').attr('alt', this.alt).appendTo($slides);

Instead the whole code frozen meaning I can't click the images at all?

I did some research and I found a lot of example on attr() function. It's bit more complicate than I thought

I also did .attr(this.alt) or .attr('alt') just to see will it work. Both didn't work.

Here is what I got so far:

<script type="text/javascript">

jQuery(function($){

//clicking image goes to previous slide 
$('a.prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
});

//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));
});

//initialize show
iniShow();

function iniShow() {

//show first image
    $('.slideshow').each(function() {
        $(this).find('img:first').fadeIn(500);
    })
}

//show previous slide   
function prevSlide($slides) {
    $slides.find('img:last').attr('alt', this.alt).prependTo($slides);
    showSlide($slides);
}

//show next slide
function nextSlide($slides) {
    $slides.find('img:first').attr('alt', this.alt).appendTo($slides);
    showSlide($slides);
}

//show slides
function showSlide($slides) {

//hide (reset) all slides
    $slides.find('img').attr('alt', this.alt).hide();

//fade in next slide
    $slides.find('img:first').attr('alt', this.alt).fadeIn(500);
}
});
</script>

Any suggestions? Thanks!

LastMitch · Answer 8 · 2012-09-28T02:32:12+00:00

@pritaeas

You should add a div to hold your text (at the position you want it), and use that to display the matching alt texts. That would solve your issue IMO.

You mean something like this:

<div class="image-container">
  <p><img src="image/1.jpg width="400" height="400" alt="Some Name"></p>
  <p>This is where the captions goes?</p>
</div>

The paragraph you provided is a placeholder, where you copy the alt tag of the image (you already have) that is currently shown.

So all of the images should have a individual place holder like the one I posted above?

<div class="slideshow">
    <div class="slides">
        <div class="image-container">
    <img src="images/01.jpg" width="300" height="500" alt="Caption 1 Image is ..." />
    <p>This is where the captions goes? 1</p>
    </div>
        <div class="image-container">
    <img src="images/02.jpg" width="200" height="500" alt="Caption 2 Image is ..." />
    <p>This is where the captions goes? 2</p>
    </div>
        <div class="image-container">
   <img src="images/03.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
    <p>This is where the captions goes? 3</p>
    </div>
        <div class="image-container">
   <img src="images/04.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
    <p>This is where the captions goes? 4</p>
    </div>
    </div>
    <div class="controls">
    <a class="prev" href="javascript:void(0);">Previous</a> |
    <a class="next" href="javascript:void(0);">Next</a>
    </div>
</div>

When I run it on PHPEasy. On the bottom it show 4 captions. When I click the Next image the first caption appears on top. After I click the last image all 4 captions are on top?

What did I do wrong? I didn't create a css for <div class="image-container"> Should I create one? Will fixed the issue?

Any suggestions? Thanks!

LastMitch · Answer 9 · 2012-09-28T13:47:22+00:00

@pritaeas

Thanks example and explanation! I will make some adjustment.

LastMitch · Answer 10 · 2012-09-28T14:05:22+00:00

@pritaeas

I make some adjustment and the caption appear. But it only appear when I click on the image. But when I click on "Previous" | "Next" the caption doesn't appear.

This is the code:

//show previous slide   
function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    $('#caption').text(this.alt);
    showSlide($slides);
}

//show next slide
function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    $('#caption').text(this.alt);
    showSlide($slides);
}

This is the overall changes I made I added couple comments so I know what I'm doing:

<script type="text/javascript">

jQuery(function($){

//clicking image goes to previous slide with caption
$('a.prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
    $('#caption').text(this.alt);
});

//clicking image goes to next slide with caption
$('a.next, .slideshow img,').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));
    $('#caption').text(this.alt);
});

//initialize show
iniShow();

function iniShow() {
//show first image with fade in caption
    $('.slideshow').each(function() {
        $(this).find('img:first').fadeIn(500);
        $('#caption').text(this.alt);
    })
}

//show previous slide with caption
function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    $('#caption').text(this.alt);
    showSlide($slides);
}

//show next slide with caption
function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    $('#caption').text(this.alt);
    showSlide($slides);
}

//show slides with caption
function showSlide($slides) {
//hide (reset) all slides
    $slides.find('img').hide();
//fade in next slide
    $slides.find('img:first').fadeIn(500);
//show caption  
    $('#caption').text(this.alt);
}
});
</script>

Can you explain to me what I did wrong? Any suggestions? Thanks!

LastMitch · Answer 11 · 2012-09-28T16:59:37+00:00

@pritaeas

Thanks for the example. I will make some adjustment. I will test it out and let you know how it goes. Thanks!

LastMitch · Answer 12 · 2012-09-28T17:00:13+00:00

@JJenZz

Thanks for the reply and example. I will look into that also. Thanks!

LastMitch · Answer 13 · 2012-09-29T01:27:25+00:00

@pritaeas

I make some adjustments and the caption appear when I click Next | Previous. I appreciate that you took your time to explain things to me and you been very patience. Thanks!

LastMitch · Answer 14 · 2012-09-29T01:31:42+00:00

@JJenZz

I look over the example that you provided and you're right about code! Pritaeas was about to go to that direction I feel because I look over the code and compare to your code I notice some similarity.

I appreciate that you took your time to write that code! Thanks!