Echo <img> & <alt> Issue

Question

LastMitch

12 Years Ago

Hi

I recently created a JQuery Gallery Script in the Javascript section with some help from pritaeas & JJenZz:

Here is the link to the script:

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/434987/havent-issue-with-seeing-alt-with-image-in-jquery

The JQuery code works you can check the link and test it out.

Since the script is in JQuery. I want to add PHP code with it. Another words I want to combine PHP & JQuery

This is the changes I made from 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>

to this:

$image = array(array('image'=>'T1.jpg','alt'=>'Time'),
               array('image'=>'I2.jpg','alt'=>'To'),
               array('image'=>'M3.jpg','alt'=>'Tell'),
               array('image'=>'E4.jpg','alt'=>'Toke'));

$alt = array(array('alt'=>'Time'),
             array('alt'=>'To'),
             array('alt'=>'Tell'),
             array('alt'=>'Toke'));

<img src="images/<?php echo $image;?>.jpg" alt="<?php echo $alt;?>" />

I'm having issue echo <img> & <alt> together.

Here is my update example:

<!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>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<style type="text/css">
.slideshow img { display: none; cursor: pointer; }
</style>
<script type="text/javascript">

    jQuery(function($){
    //clicking prev button goes to previous slide
    $('.slideshow .prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
    });
    //clicking next button or image goes to next slide
    $('.slideshow .next, .slideshow img,').click(function() {
    nextSlide($(this).parents('.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);
    }
    });
</script>
<body>

<?php
    $image = array(array('image'=>'T1.jpg'),
                   array('image'=>'I2.jpg'),
                   array('image'=>'M3.jpg'),
                   array('image'=>'E4.jpg'));

      $alt = array(array('alt'=>'Time'),
                   array('alt'=>'To'),
                   array('alt'=>'Tell'),
                   array('alt'=>'Toke'));
?>

<div class="slideshow">
<div class="slides">

<img src="images/<?php echo $image;?>.jpg" alt="<?php echo $alt;?>" />

</div>

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

<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 will help. I appreciate it. Thanks!

image jquery php

3 Contributors
9 Replies
633 Views
22 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by LastMitch

diafol

12 Years Ago

I don't understand this:

<img src="images/<?php echo $image;?>.jpg" alt="<?php echo $alt;?>" />

How does this work? $image and $alt are multidimensional arrays - so I can't see how the above deals with them. Maybe create the image tags with a loop?

ALso, Why have two separate image and alt arrays? Surely, one is sufficient, especially as they seem to be linked. SO this looks sufficient to me:

$image = array(array('image'=>'T1.jpg','alt'=>'Time'),
           array('image'=>'I2.jpg','alt'=>'To'),
           array('image'=>'M3.jpg','alt'=>'Tell'),
           array('image'=>'E4.jpg','alt'=>'Toke'));

The code just looks overly complicated. In addition, I'd create a jQuery plugin file for this, with options/defaults. Just a thought.

Bachu 45 Newbie Poster

12 Years Ago

<?php

$images = array('T1.jpg','I2.jpg','M3.jpg','E4.jpg');

$alt = array('Time','To','Tell','Toke');

foreach($images as $key=>$image) {
    echo '<img src="images/'.$image.'" alt="'.$alt[$key].'" />';
}

?>

diafol

12 Years Ago

//In include file or above DTD:
$image = array(array('image'=>'T1.jpg','alt'=>'Time'),
               array('image'=>'I2.jpg','alt'=>'To'),
               array('image'=>'M3.jpg','alt'=>'Tell'),
               array('image'=>'E4.jpg','alt'=>'Toke'));
$output = '';               
foreach($image as $img){
    $output .= "<img src='{$img['image']}' alt='{$img['alt']}' />"; 
}

//then where req'd in html body
echo $output;

That's the sort of thing I'd do to get the actual html into place as it leaves the server, ready for modding by js.

LastMitch commented: Thanks for example & explanation! +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-10-01T00:48:49+00:00

@diafol

Thanks for the reply and explanation!

How does this work? $image and $alt are multidimensional arrays - so I can't see how the above deals with them. Maybe create the image tags with a loop?

My intention was to echo $image & $alt. The reason why I separate it because I thought it will be easy to echo it out. As a loop kinda because I want the array to have the data instead of having bunch of <img> in the <div> that's why I created like that.

I like the array you created.

The code just looks overly complicated. In addition, I'd create a jQuery plugin file for this, with options/defaults. Just a thought.

Sorry for the confusing. I didn't want it to be complicated. I thought it will be simple. But I guess not. I will make the adjustment base on your array. After when I finish solving this thread then I'll ask you for the link for your JQuery plugin so I test it out and play around with it. I didn't know you create a your own JQuery plugin.

LastMitch · Answer 2 · 2012-10-01T01:11:14+00:00

@diafol

I make some adjustments:

<?php
$image = array(array('image'=>'T1.jpg','alt'=>'Time'),
               array('image'=>'I2.jpg','alt'=>'To'),
               array('image'=>'M3.jpg','alt'=>'Tell'),
               array('image'=>'E4.jpg','alt'=>'Toke'));
           ?>

<div class="slideshow">

    <div class="slides">

<img src="images/<?php echo $image;?>.jpg" alt="<?php echo $alt;?>" />

    </div>

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

    <div class="controls">

    <a class="prev" href="javascript:void(0);">Previous</a> |
    <a class="next" href="javascript:void(0);">Next</a>

    </div>

</div>

Now I'm a bit stuck because I think the echo is not going to echo because there's $alt and not sure how to echo the array out now.

I actually try this

<?php echo '<img src="images/.jpg" alt=""/>';?>

it didn't work it the whole page went blank.

I also try this

<?php echo '<img src="images/image.jpg" alt=""/>';?>

it didn't work it either the whole page went blank again.

Then I try this

<?php echo '$image <img src="images/" alt=""/>';?>

it just echo the word $image

Then I also try this

<?php echo $image;?>

it just mention this: Array to string conversion Array

Any suggestion on how to echo the correct way base on the new(your) array. Thanks!

LastMitch · Answer 3 · 2012-10-01T19:30:47+00:00

@Bachov Varghese

Thanks for the reply and an example. I will test it out. Thanks

LastMitch · Answer 4 · 2012-10-01T19:31:48+00:00

@diafol

Thanks for the example and explanation. I will test out the new code.

LastMitch · Answer 5 · 2012-10-01T19:36:42+00:00

@Bachov Varghese

I test your code and it works! Thanks!

LastMitch · Answer 6 · 2012-10-01T19:42:53+00:00

@diafol

I also test your code and it also works! Thanks for taking your time to explain to me what I did wrong and also writing the code to let me see how it works. Now I have a better understanding and also have a picture on how this works. Now I got to see how JQuery & PHP work together! Thanks!