Highlighted

i want alt text to appear as a caption

New Here ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

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>

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

i want alt text to appear as a caption

New Here ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

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>

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 13, 2018 0
Adobe Community Professional ,
Aug 13, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
Adobe Community Professional ,
Aug 13, 2018

Copy link to clipboard

Copied

Use After Effects.

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 1
New Here ,
Aug 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 13, 2018 0
LEGEND ,
Aug 14, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 0
osgood_ LATEST
LEGEND ,
Aug 14, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 0