Skip to main content
jeffs84378818
jeffs84378818
Participant
August 13, 2018
Answered

i want alt text to appear as a caption

  • August 13, 2018
  • 4 replies
  • 2692 views

Hi,

I am trying to build a image gallery page for website in dreamweaver and I wanted alt text appear as a caption with bigger image when I click on thumbnail.

Its not happening I followed utube tutorial everything working fine.

<script type ="text/javascript" src="js/jquery-3.2.1.min.js">

</script>

<script type ="text/javascript" src="js/jquery.js">

</script>

 

 

<script type ="text/javascript" >

$(document).ready(function() {

$("table img[width=196]").click(function(){

  $("caption").text(this.alt)

   })

)};

}

what is wrong?

and also please tell me I want 3d rotating image made on solid works , how can I insert it on website ?which software help in supporting 3d images on website.

    This topic has been closed for replies.
    Correct answer osgood_

    What jquery solution are you using to make the big image appear?

    There is literally probably a million ways to do this in jQuery or plain javascript.

    One example is below:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>jQuery Image Gallery</title>

    <style>

    * {

    box-sizing: border-box;

    }

    img {

    max-width: 100%;

    }

    .gallery-wrapper {

    width: 75%;

    margin: 0 auto;

    text-align: center;

    }

    @media screen and (max-width: 768px) {

    .gallery-wrapper {

    width: 90%;

    }

    }

    @media screen and (max-width: 480px) {

    .large-image {

    display: none;

    }

    }

    .large-image img {

    padding: 10px;

    border: 1px solid #ccc;

    }

    figure {

    margin: 0;

    padding: 0;

    }

    figcaption {

    padding: 5px 0 15px 0;

    }

    .thumbnail-wrapper {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    }

    .thumbnail {

    width: 24%;

    height: auto;

    }

    @media screen and (max-width: 480px) {

    .thumbnail {

    width: 100%;

    }

    }

    .thumbnail figcaption {

    display: none;

    }

    @media screen and (max-width: 480px) {

    .thumbnail figcaption {

    display: block;

    }

    }

    </style>

    </head>

    <body>

    <div class="gallery-wrapper">

    <div class="large-image">

    <figure><img src="https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" alt="Dog Image 1">

    <figcaption>&copy;Christian Domingues  / pexels.com</figcaption>

    </figure>

    </div>

    <!--large-image-->

    <div class="thumbnail-wrapper">

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" alt="&copy;Christian Domingues  / pexels.com">

    <figcaption>&copy;Christian Domingues  / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/805306/pexels-photo-805306.jpeg" alt="&copy;Jodie DS  / pexels.com">

    <figcaption>&copy;Jodie DS  / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/551628/pexels-photo-551628.jpeg" alt="&copy;Kat Jayne / pexels.com">

    <figcaption>&copy;Kat Jayne / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/179107/pexels-photo-179107.jpeg" alt="&copy;Adrianna Calvo  / pexels.com ">

    <figcaption>&copy;Adrianna Calvo  / pexels.com</figcaption>

    </figure>

    </div>

    </div>

    <!--end thumbnail-wrapper-->

    </div>

    <!--end gallery-wrapper-->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>

    $('.thumbnail img').click(function(){

    var imgSrc = $(this).attr('src');

    var imgCap = $(this).attr('alt');

    $('.large-image').css('display','none');

    $('.large-image').fadeIn().html('<figure><img src="' + imgSrc + '"><figcaption>' + imgCap + '</figcaption></figure>')

    });

    </script>

    </body>

    </html>

    4 replies

    O
    osgood_Correct answer
    Legend
    August 14, 2018

    What jquery solution are you using to make the big image appear?

    There is literally probably a million ways to do this in jQuery or plain javascript.

    One example is below:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>jQuery Image Gallery</title>

    <style>

    * {

    box-sizing: border-box;

    }

    img {

    max-width: 100%;

    }

    .gallery-wrapper {

    width: 75%;

    margin: 0 auto;

    text-align: center;

    }

    @media screen and (max-width: 768px) {

    .gallery-wrapper {

    width: 90%;

    }

    }

    @media screen and (max-width: 480px) {

    .large-image {

    display: none;

    }

    }

    .large-image img {

    padding: 10px;

    border: 1px solid #ccc;

    }

    figure {

    margin: 0;

    padding: 0;

    }

    figcaption {

    padding: 5px 0 15px 0;

    }

    .thumbnail-wrapper {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    }

    .thumbnail {

    width: 24%;

    height: auto;

    }

    @media screen and (max-width: 480px) {

    .thumbnail {

    width: 100%;

    }

    }

    .thumbnail figcaption {

    display: none;

    }

    @media screen and (max-width: 480px) {

    .thumbnail figcaption {

    display: block;

    }

    }

    </style>

    </head>

    <body>

    <div class="gallery-wrapper">

    <div class="large-image">

    <figure><img src="https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" alt="Dog Image 1">

    <figcaption>&copy;Christian Domingues  / pexels.com</figcaption>

    </figure>

    </div>

    <!--large-image-->

    <div class="thumbnail-wrapper">

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" alt="&copy;Christian Domingues  / pexels.com">

    <figcaption>&copy;Christian Domingues  / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/805306/pexels-photo-805306.jpeg" alt="&copy;Jodie DS  / pexels.com">

    <figcaption>&copy;Jodie DS  / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/551628/pexels-photo-551628.jpeg" alt="&copy;Kat Jayne / pexels.com">

    <figcaption>&copy;Kat Jayne / pexels.com</figcaption>

    </figure>

    </div>

    <div class="thumbnail">

    <figure>

    <img src="https://images.pexels.com/photos/179107/pexels-photo-179107.jpeg" alt="&copy;Adrianna Calvo  / pexels.com ">

    <figcaption>&copy;Adrianna Calvo  / pexels.com</figcaption>

    </figure>

    </div>

    </div>

    <!--end thumbnail-wrapper-->

    </div>

    <!--end gallery-wrapper-->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script>

    $('.thumbnail img').click(function(){

    var imgSrc = $(this).attr('src');

    var imgCap = $(this).attr('alt');

    $('.large-image').css('display','none');

    $('.large-image').fadeIn().html('<figure><img src="' + imgSrc + '"><figcaption>' + imgCap + '</figcaption></figure>')

    });

    </script>

    </body>

    </html>

    O
    osgood_
    Legend
    August 14, 2018

    If you are feeling adventurous then the code below is the same as the jQuery gallery in the post above but produced in Vue js.

    I'm yet to be convinced that Vue is going to be a replacement for jQuery, to me it seems more complex more code and doesnt offer anywhere near what jQuery does............perhaps its better suited for SPAs rather than websites. I have not yet gotten my head around Vue transitions so the subtle fade in effect of the large image has not been applied. If anyone wants to wade in and introduce the Vue transition that would be good. I can add it with css but Vue is meant to have its own built in transitions but I can make them work for anything other than a simple toggle button, yet.

    <!DOCTYPE HTML>

    <html lang="en-US">

    <head>

    <meta charset="UTF-8">

    <title>Vue Image Gallery</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>

    <style>

    * {

    box-sizing: border-box;

    }

    img {

    max-width: 100%;

    }

    .gallery-wrapper {

    width: 75%;

    margin: 0 auto;

    text-align: center;

    }

    @media screen and (max-width: 768px) {

    .gallery-wrapper {

    width: 90%;

    }

    }

    @media screen and (max-width: 480px) {

    .large-image {

    display: none;

    }

    }

    .large-image img {

    padding: 10px;

    border: 1px solid #ccc;

    }

    figure {

    margin: 0;

    padding: 0;

    }

    figcaption {

    padding: 5px 0 15px 0;

    }

    .thumbnail-wrapper {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    }

    .thumbnail {

    width: 24%;

    height: auto;

    }

    @media screen and (max-width: 480px) {

    .thumbnail {

    width: 100%;

    }

    }

    .thumbnail figcaption {

    display: none;

    }

    @media screen and (max-width: 480px) {

    .thumbnail figcaption {

    display: block;

    }

    }

    .fade-enter-active, .fade-leave-active {

      transition: opacity .5s;

    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

      opacity: 0;

    }

    </style>

    </head>

    <body>

    <div class="gallery-wrapper">

    <div class="large-image" v-if="defaultImage">

    <figure>

    <img v-bind:src="defaultImg" v-bind:alt="defaultCap">

    <figcaption v-html="defaultCap"></figcaption>

    </figure>

    </div>

    <!--large-image-->

    <div v-else class="large-image">

    <figure>

    <img v-bind:src="this.selectedImage.imgSrc" v-bind:alt="this.selectedImage.caption">

    <figcaption v-html="this.selectedImage.caption"></figcaption>

    </figure>

    </div>

    <!--large-image-->

    <div class="thumbnail-wrapper">

    <div class="thumbnail" v-for="(image, index) in images">

    <figure>

    <img v-bind:src="image.imgSrc" v-bind:alt="image.caption" v-on:click="showSelected(image)" v-bind:key="index">

    <figcaption v-html="image.caption"></figcaption>

    </figure>

    </div>

    <!--end thumbnail-->

    </div>

    <!--end thumbnail-wrapper-->

    </div>

    <!--end gallery-wrapper-->

    <script>

    new Vue({

    el: '.gallery-wrapper',

    data: {

    defaultImage: true,

    defaultImg: "https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg",

    defaultCap: "&copy;Christian Domingues  / pexels.com",

    images: [

    {imgSrc: "https://images.pexels.com/photos/731022/pexels-photo-731022.jpeg" , caption: "&copy;Christian Domingues  / pexels.com"},

    {imgSrc: "https://images.pexels.com/photos/805306/pexels-photo-805306.jpeg" , caption: "&copy;Jodie DS  / pexels.com"},

    {imgSrc: "https://images.pexels.com/photos/551628/pexels-photo-551628.jpeg" , caption: "&copy;Kat Jayne / pexels.com"},

    {imgSrc: "https://images.pexels.com/photos/179107/pexels-photo-179107.jpeg" , caption: "&copy;Adrianna Calvo  / pexels.com"}

    ],

    selectedImage: {}

    },

    methods: {

    showSelected (image) {

    this.defaultImage = false,

    this.selectedImage = image

    }

    }

    })

    </script>

    </body>

    </html>

    J
    jamesd43953274
    Participant
    August 14, 2018

    You could always try using the figure and figcaption tags.

    HTML figcaption Tag

    Save you from fussing about with javascript as the caption can just be shown/hidden with css.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 13, 2018

    Use After Effects.

    How to Create 3D Animated Rotating Logos in Adobe After Effects CC Tutorial - YouTube

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 13, 2018

    Copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Image Captions</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    .new {

      display: inline-block;

      position: relative;

    }

    .new img {

      display: block;

    }

    .new::after {

      content: attr(data-alt);

      position: absolute;

      bottom:0;

      left: 0;

      height: 1.5em;

      width: 100%;

      background: rgba(0,0,0,0.75);

      z-index: 2;

      color:white;

      text-align: center;

      line-height: 1.5em}

    </style>

    </head>

    <body>

    <p><img src="https://dummyimage.com/400x300" alt="This is my caption"></p>

    <p><img src="https://dummyimage.com/400x300" alt="This is another caption"></p>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script>

    //Image Captions Function

      $('img').each(function() {

        var data = $(this).attr('alt');

        $(this)

          .wrap("<div class='new'></div>")

          .parent('.new')

          .attr('data-alt', data)

        ;

      });

    </script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices