There are four images I wish to be in one line. Three images have been uploaded to my website while the fourth is generated from JavaScript. Three of the images are aligned but the JavaScript image falls underneath to the next line. How can I fix this?
<h3 style="text-align: center;">
<img alt="" class="pull-center" height="168" src="images/wedding-wire-badge.jpg" width="168">
<img alt="" class="pull-center" height="168" src="images/WPIC-certification-logo11.png" width="151">
<img alt="" class="pull-center" height="125" src="images/wpic-canada.png" width="250">
<script src='//www.weddingwire.com/assets/vendor/widgets/ww-rated-2013-d545585beb7833eec3a4dc56cbb3224c.js' type='application/javascript'>
</script>
</h3>
<div id='ww-widget-wwrated-2013'>
<h3 style="text-align: center;">
<a class="ww-top" href="https://www.weddingwire.com" target="_blank" title="Weddings, Wedding, Wedding Venues"></a>
<a class="ww-bottom" href="https://www.weddingwire.com/reviews/the-wedding-planner-plus-ocho-rios-island-wide/ebeea94a4b2d94b0.html" target="_blank" title="The Wedding Planner Plus Reviews, Jamaica Wedding Planning">
</a>
<script>
WeddingWire.ensureInit(function() {
WeddingWire.createWWRated2013({
"vendorId": "ebeea94a4b2d94b0"
});
});
</script>
</h3>
</div>
<div id="ww-widget-wwrated-2013"></div>
Hope It works for you, Thanks :-)
<h3 style="text-align: center; display:inline">
<img alt="" class="pull-center" height="168" src="images/wedding-wire-badge.jpg" width="168">
<img alt="" class="pull-center" height="168" src="images/WPIC-certification-logo11.png" width="151">
<img alt="" class="pull-center" height="125" src="images/wpic-canada.png" width="250">
<script src='//www.weddingwire.com/assets/vendor/widgets/ww-rated-2013-d545585beb7833eec3a4dc56cbb3224c.js' type='application/javascript'>
</script>
</h3>
<div id='ww-widget-wwrated-2013' style="display:inline-block">
<h3 style="text-align: center;">
<a class="ww-top" href="https://www.weddingwire.com" target="_blank" title="Weddings, Wedding, Wedding Venues"></a>
<a class="ww-bottom" href="https://www.weddingwire.com/reviews/the-wedding-planner-plus-ocho-rios-island-wide/ebeea94a4b2d94b0.html" target="_blank" title="The Wedding Planner Plus Reviews, Jamaica Wedding Planning">
</a>
<script>
WeddingWire.ensureInit(function() {
WeddingWire.createWWRated2013({
"vendorId": "ebeea94a4b2d94b0"
});
});
</script>
</h3>
</div>
<div id="ww-widget-wwrated-2013"></div>
Related
I have this Codepen demonstrating how to do it with jQuery. I tried to do it with vanilla Javascript but couldn't get it to work. How would you go about this in plain ES6?
HTML:
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Javascript:
$(document).ready(function () {
// Scan the webpage for all class names of 'external'.
$(".external").each(function () {
// For each class name of 'external' found, find descendant tag "a" of that div and apply the rel attribute.
$(".external a").attr("rel", "external noopener");
});
});
You can just do document.querySelectorAll('.external a').forEach to iterate over all of them:
document.querySelectorAll('.external a').forEach((el) => {
el.setAttribute('rel', 'external noopener');
});
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Running into some odd issue. I have an extremely long horizontally scrolled page...( I know it's not recommended, but it's happened so...) the page has different sections that can be visited with # tags. The last section "lookbook" has a slider coded with js and css. Initial page loads everything perfectly but on getting to the lookbook, none of the javascript works, the page is then refreshed and everything works well. is it because of the defer property in the script tag? Let me know if anything else is required to understand the problem.
(please gonna go into the collections link and then onto BA page and then lookbook.)
here is the website - http://shekleung.com/
HTML of full page -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | BA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' href='css/mobile.css' />
</head>
<body class="col">
<div class="control">
<p id="pause">▌ ▌</p>
<p id="audio">♩</p>
</div>
<nav class="nav-container">
<div class="nav-bar">
Show
About
Research Films
Stills
Lookbook
</div>
<div class="info overlay">
<div class="text">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
Back
</div>
<div class="mobile__header-controls">
<div class="mobile__nav">
<button class="mobile__more">+</button>
<div class="mobile__process-nav">
Show
About
Research Film
Stills
Lookbook
</div>
<div class="mobile__main-nav">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
</div>
Back
</div>
</nav>
<main class="mobile__main">
<div class="tab-content animate__animated animate__fadeIn">
<div id="show" data-tab-content>
<div class="video-wrapper">
<video id="catwalk" playsinline autoplay loop preload="metadata">
<source src="/img/BA/Samson Leung Dear you, he said - CSM BA Fashion.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="about" data-tab-content>
<div class="about-text black-text">
<div class="proj-header fade-in">
<p><b>
I realise i didn’t had the luxury of creating a home video as a kid, hence I wanted to
use this opportunity to present my collection in the form of a film.
</b>
</p>
</div>
<div class="about-body">
<p class="fade-in">
Based on the feeling of overwhelmed, I redirected the emotion into a mood film I shot in Japan
named <b>“Dear You”</b>. My project follows the sequel, a second narrative film shot in Hong
Kong
named
“Paper Boys” which follows a “paper” boy who felt overwhelmed and decided to leave his life
behind, however after reaching the epiphany (explosion), he realises in the end that he is still
very much a papery boy at heart. Collaborated with friends at the Royal College of Music, we
composed a poetic soundtrack specifically for my body of work. These films serve as a form of a
self portraiture.
</p>
<p class="fade-in">
In traditional Chinese self portraiture, Shan Shui painting or geology were used
as a form of metaphor of self reflection, hence being inspired by He Jian Chen’s paintings of
rock,
it provides the mood I wanted to achieve within the plot. With the inspiration of the granular
texture from the film, as well as surface texture of the rock, I develop my own material: slime,
a
malleable material that when cool, stays stiff and when it’s steamed, it’s soft as leather
and can be mould and stitched.
</p>
<p class="fade-in">
Texture and grain was explored through several textile techniques, screen printing and spray
paints in order to achieve the gradual change in grains and texture within the collection. I
also
developed an oil paint print transfer technique that allows me to build layers of colours and
opacity and transfer onto the surface any fabric as well as my slime. Although the collection is
mostly worn by men, it primarily focuses on women’s garment details.<br><br>
I hope that as the model walks down the runway, when they are photographed or
filmed, the image will present itself as a still from the “film.” Hence creating a moving film
gallery. The catwalk itself results in the third sequel of my film series.
</p>
</div>
</div>
</div>
<div id="researchFilm-ba" data-tab-content>
<div class=" margin-film video-wrapper-ba black-text fade-in">
<p>Dear You (2017)</p>
<video class="mood2" video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
preload="metadata">
<source src="/img/BA/dear you,.mp4" type="video/mp4">
</video>
</div>
<div class="video-wrapper-ba black-text fade-in">
<p>Paper Boys (2018)</p>
<video class="mood" video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
preload="metadata">
<source src="/img/BA/Paper Boys.mp4" type="video/mp4">
</video>
</div>
<div class="credit-ba">
<button class="credit-icon">(...)</button>
<div class="credit-text">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
<br>Film produced with Taka Hata
<br>Accessories produced by Kristy Fan
<br>Soundtrack composed by Zacharias Wolfe
and Friends at Royal College of Music
<br><br>
Look Book
<br>Make Up by Kristina Pavlovic
<br>Look Book photographed by Simonas Berukstis
<br>Slime Making photographed by Oliver Vanes
<br><br>
Show
<br>Internal Show Make Up by Phoebe Walters
<br>Press Show Make Up by Mariko Yamamoto
<br>Supported by L’Oréal Professionnel
<br><br>
Models
<br>Yota Hoshi
<br>Masato Funaoka
<br>Ryan
<br>Youtian Zhang
<br>Tien Ai Guan
<br>Xander Ang
<br>Wing Fung
<br><br>
and the BAFCSM team</p>
</div>
</div>
</div>
<div id="stills-ba" data-tab-content>
<div class="stills-ba">
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
<img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
<img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
<img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
</div>
</div>
</div>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<img src="/img/BA/lookbook/17.jpg" id="lastClone" alt="">
<img src="/img/BA/lookbook/01.jpg">
<img src="/img/BA/lookbook/02.jpg">
<img src="/img/BA/lookbook/03.jpg">
<img src="/img/BA/lookbook/04.jpg">
<img src="/img/BA/lookbook/05.jpg">
<img src="/img/BA/lookbook/06.jpg">
<img src="/img/BA/lookbook/07.jpg">
<img src="/img/BA/lookbook/08.jpg">
<img src="/img/BA/lookbook/09.jpg">
<img src="/img/BA/lookbook/10.jpg">
<img src="/img/BA/lookbook/11.jpg">
<img src="/img/BA/lookbook/12.jpg">
<img src="/img/BA/lookbook/13.jpg">
<img src="/img/BA/lookbook/14.jpg">
<img src="/img/BA/lookbook/15.jpg">
<img src="/img/BA/lookbook/16.jpg">
<img src="/img/BA/lookbook/17.jpg">
<img src="/img/BA/lookbook/01.jpg" id="firstClone" alt="">
</div>
</div>
</div>
</div>
</main>
<script defer src="/js/collections.js"></script>
</body>
</html>
I'm trying to get text in paragraph ".name" and put into all alt attribute in an image gallery. How can i get this text and put into attribute changing the current text. For example: in .box-product one the image of product 0001 should get alt text from this paragraph Box 0001 and another blocks the same respectly.
$(document).ready(function() {
for (i = 0; i < document.getElementsByClassName("box-product").length; i++) {
document.getElementsByClassName("name")[i].setAttribute(
"alt", document.getElementsByTagName("img")[i].src);
}
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
Perhaps you meant this?
I use jQuery for all the access - you had typos in your DOM access
$(function() {
$(".box-product").each(function() {
$(this).find("img").attr("alt",$(this).find("p.name").text());
});
});
.box-product {
display: inline-block;
border: 1px gray solid;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product Gallery -->
<div class="gallery-products">
<!-- Product 0001 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0002 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0002</p>
</div>
<!-- Product 0003 -->
<div class="box-product">
<a id="product" href="#" class="details">
<p class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/3_D-Box.jpg" height="100" alt="Replace this alt" id="" />
</p>
</a>
<p class="name">Box 0003</p>
</div>
</div>
With jQuery,
$('.box-product').each(function() {
$(this).children('img').attr('alt', $(this).children('.name').text());
});
Basically, $('.box-product') gets all of the boxes. Then you need to loop through each, getting the text from it's child .name and assigning it to the alt attribute of it's child img.
Without jQuery, you can use the querySelectorAll and querySelector functions to easily the same.
document.querySelectorAll('.box-product').forEach(function() {
this.querySelector('img').alt = this.querySelector('.name').innerText;
});
And without those functions (for older browsers):
var products = document.getElementsByClassName('box-product');
for(i in products) {
var product = products[i];
product.getElementsByTagName('img')[0].setAttribute('alt', product.getElementsByClassName('name')[0].innerText);
}
I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?
Situation:
I am resizing / preloading images with javascript before showing them on the page.
Problem:
ie7 / 8 tend to randomy fire the load event for some images and not for others (this is completely random and different on every refresh)
Code:
JS:
$(document).ready(function(){
$(".daImg").hide();
$("figure").each(function(){
$(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>');
var afb = $(this).find(".daImg");
afb.load(function(){
console.log("loaded");
$(this).parent().parent().parent().find(".loader").remove();
if($(this).parent().parent().parent().is(".last")){
if(afb.height() > 280){
var w = (afb.width()/afb.height())*280
afb.css("width",w);
afb.css("height","280px");
}
} else {
if(afb.height() > 245){
var w = (afb.width()/afb.height())*245
afb.css("width",w);
afb.css("height","245");
}
}
afb.css("left","50%");
afb.css("margin-left","-"+afb.width()/2+"px");
afb.fadeIn();
})
});
}
HTML
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
If anyone could shed some light of what is going on here, I'd appreciate it!
Note: This issue has nothing to do with caching as I am adding time-stamps to all images in my actual code.
you may try a different approach in your case
use css
.daImg {
display:none;
}
then hook your image resizing script on $(window).load();
and manipulate all images :not(:visible) at once
you could also duplicate this for the rest browsers to the img.load event but for images that are not already visible. i mean your selector to be var afb = $(this).find(".daImg:not(:visible)");
in this case IE all images that are not processed by the other event will get processed there