Member Avatar for LastMitch

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!

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.

Member Avatar for LastMitch

@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

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.

You'll want to use the .attr function.

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

@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?

Member Avatar for LastMitch

@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!

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

Member Avatar for LastMitch

@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.

Member Avatar for LastMitch

@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!

Member Avatar for LastMitch

@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!

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);
Member Avatar for LastMitch

@pritaeas

Thanks example and explanation! I will make some adjustment.

Member Avatar for LastMitch

@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!

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

$('#caption').text($slides.find('img:first').attr('alt'));
commented: Thanks for the explantion +5

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);
    }
});
commented: Thanks for the code! +5
Member Avatar for LastMitch

@pritaeas

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

Member Avatar for LastMitch

@JJenZz

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

Member Avatar for LastMitch

@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!

Member Avatar for LastMitch

@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!

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.