I'm working on my new website design and decided to incorporate Vue.JS which I know very little about but am learning as I redesign my website.
I am using a Vue app to load different pages on my site.
I am also using it to load the image gallery, so I have all my images placed into an array in the app and they load just fine into the HTML.
I decided to use figures and want to place a caption beneath each image.
What I'm trying to do is place the figcaption text in the vue app, as part of the image array and have it load each text that belongs with each image.
this is the code i have for the html:
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption> a caption </figcaption>
</figure>
</div>
the "a caption" is just a place taker right now so i can see what it looks like on the site but i want that replaced with the actual caption which would be set in the vue app which is below.
js:
<script>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
.... rest of the vue app code which is fine and works so not necessary to show.
Question: Can I do it this way and how do I access that 'caption' portion of text and put it into the html as text?
Simply use img.caption in the figure tag to display the caption content.
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption>{{ img.caption }}</figcaption>
</figure>
I think this works fine.
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption v-html=“caption”></figcaption>
</figure>
</div>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
caption:"<h1>hi</h1>",
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
Related
For context, this is just a website that displays a thumbnail gallery linking to larger photos/videos.
When the thumbnails of photos are opened there is no problem. The thumbnails with a video attached to them look identical to the photo thumbnail only until the video thumbnail is clicked and the video will not load. Reference the HTML(first block) & javascript(second block) code below, any help would be greatly appreciated, this is my own personal project and I have been stuck for a couple days lol. if there any other information required, please do not hesitate to ask
This what happens when the thumbnail with the video is clicked but the video DOES NOT PLAY :(
<!-- code below is the PHOTO block of code ! -->
<article class="thumb">
<a href="images/fulls/21.jpg" class="image">
<img src="images/thumbs/21.jpg" class="image" alt="" /></a>
<h2> Cmon mayne</h2>
<p>Photoshoot with Myles Jay </p>
</article>
<!-- code below is the VIDEO block of code ! -->
<article class="thumb">
<a href="images/fulls/16.mp4" type="video/mp4" video
src="images/fulls/16.mp4" class="image">
<img src="images/thumbs/ab22.jpg" class="image" alt="" />
</a> <h2> Getting to the work</h2>
<p>Photoshoot with Myself </p>
</article>
// Main.
var $main = $('#main');
// Thumbs.
$main.children('.thumb').each(function() {
var $this = $(this),
$image = $this.find('.image'), $image_img = $image.children('img'),
x;
// No image? Bail.
if ($image.length == 0)
return;
// Image.
// This sets the background of the "image" <span> to the image pointed to by its child
// <img> (which is then hidden). Gives us way more flexibility.
// Set background.
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
// Set background position.
if (x = $image_img.data('position'))
$image.css('background-position', x);
// Hide original img.
$image_img.hide(); });
// Poptrox.
$main.poptrox({
baseZIndex: 20000,
caption: function($a) {
var s = '';
$a.nextAll().each(function() {
s += this.outerHTML;
});
return s;
},
fadeSpeed: 300,
onPopupClose: function() { $body.removeClass('modal-active'); },
onPopupOpen: function() { $body.addClass('modal-active'); },
overlayOpacity: 0,
popupCloserText: '',
popupHeight: 150,
popupLoaderText: '',
popupSpeed: 300,
popupWidth: 150,
selector: '.thumb > a.image',
usePopupCaption: true,
usePopupCloser: true,
usePopupDefaultStyling: false,
usePopupForceClose: true,
usePopupLoader: true,
usePopupNav: true,
windowMargin: 50
});
// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
$main[0]._poptrox.windowMargin = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);
I have searched every stackoverflow method mentioning a thumbnail and video, I am honestly stuck. I have been playing around with the tags and attributes but I have seem to be getting no where.
Try setting up your <article> as:
<article class="thumb">
<a href="images/fulls/16.mp4">
<img src="images/thumbs/ab22.jpg" class="image" alt="" />
</a> <h2> Getting to the work</h2>
<p>Photoshoot with Myself </p>
</article>
I need to find an automated way to update href URLs in a HTML file with the corresponding image alt text the anchor tag is wrapping while also including leading and closing RPL text.
Start:
<img src="/images/image.jpg" alt="ALT_TEXT">
End:
<img src="/images/image.jpg" alt="ALT_TEXT">
Breaking down the new URL:
First Variable: ${clickthrough('<br>
Second Variable: ALT_TEXT<br>
Third Variable: ')}
Anyone know where I should start in designing a solution for this problem? What coding language might handle this?
The language that you are looking for is JavaScript.
Here is a working example that does what you mentioned. (and here is a codepen with the same example)
const anchorElements = document.querySelectorAll('a');
[...anchorElements].forEach((anchor) => {
const altText = anchor.querySelector('img').alt;
anchor.href = "${clickthrough('" + altText + "')}";
})
<img src="https://place-hold.it/300x100" alt="text1">
<img src="https://place-hold.it/300x100" alt="text2">
<img src="https://place-hold.it/300x100" alt="text3">
I am using carousel with lazy loading ,so that images load only on scroll,
But problem is that all images except images inside carousel are not loading.
I have also tried this solution.
Carousel
<div class="owl-carousel">
<div class="item">
<img src="/_/img/Descriptive-Essay.jpg" class="lazy" alt="Descriptive Essay">
<h4>Descriptive Essay</h4>
<p>Our experienced descriptive essay writers paint a beautiful picture through words and give you an amazing descriptive essay.</p>
</div>
<div class="item">
<img src="/_/img/Persuasive-Essay.jpg" class="lazy" alt="Persuasive Essay">
<h4>Persuasive Essay</h4>
<p>Our persuasive essay writers are brilliant at convincing the reader and keeping them engaged in the essay from start to finish.</p>
</div>
<div class="item">
<img src="/_/img/Expository-Essay.jpg" class="lazy" alt="Expository Essay">
<h4>Expository Essay</h4>
<p>Our expository essay writing service delivers a perfect expository essay complete with definitions, facts, examples and stats.</p>
</div>
<div class="item">
<img src="/_/img/Narrative-Essay.jpg" class="lazy" alt="Narrative Essay">
<h4>Narrative Essay</h4>
<p>Our narrative essay writers are master in the art of story-telling and making your essays engaging so you can get the best grade.</p>
</div>
</div>
Script
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
autoplay:true,
autoplayTimeout:2000,
rewindSpeed : 1000,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:3,
nav:true,
}
}
})
</script>
Lazy Loading
<script>
$(function() {
$('.lazy').lazy({
beforeLoad: function(element){
console.log('image "' +element.data('src')+ '" is about to be loaded');
},
afterLoad: function(element) {
console.log('image "' +element.data('src') + '" was loaded successfully');
},
onError: function(element) {
console.log('error');
},
onFinishedAll: function() {
console.log('lazy instance is about to be destroyed')
}
});
});
</script>
Please help what i am doing wrong,I have also tried changing order of script but no luck.My site is live here
Add this to owl item
.owl-item {
display: inline-block;
}
One more Issue :
I assume that the content outside the div should be hidden
.owl-carousel{
overflow:hidden;
}
Its just a minor issue. Please add below code for the .owl-item.
.owl-item {
display: inline-block;
}
I hope the title isn't too confusing.
I have an array in my angular.js file:
var app = angular.module('resume', []);
app.controller('resumeCtrl', function($scope, $document) {
$scope.projects = [
{
title: 'TRU Colors Brewing Co.',
image: 'images/tcb_screenshot.png',
url: 'https://www.trucolors.co',
category: ['development', 'design']
},
{
title: 'JOMO',
image: 'images/jomo_screenshot.png',
url: 'https://jeffberlin.github.io/JOMO_website/index.html',
category: 'development'
}
];
And in my HTML file I have:
<div class="row portfolio-preview">
<div class="col-lg-4 text-center" ng-repeat="x in projects">
<div class="projects tab-content active">
<figure class="tab-pane">
<a ng-href="{{x.url}}" target="_blank">
<img class="img-fluid screenshot" ng-src="{{x.image}}">
</a>
</figure>
<div class="description">
<a href="" target="_blank">
<h5>{{x.title}}</h5>
</a>
</div>
</div>
</div>
Now my issue is, I get the correct number of boxes to show with the titles, but nothing else displays/shows from the array. For reference, this section will have 3 options in the nav area and filter them out (by the category), assuming that's the best to do it. Can anyone see something I might be doing wrong?
The HTML code shown is the only way I've been able to at least get the titles to show up by using x in projects and the x.image, x.title, etc.
P.S.- I'm very new to Angular, but appreciate you all taking the time to help!
You need to provide a relative path to your images folder. The path needs to be relative to where your html file is so the browser knows where to look properly.
Add ./ in front of your image url.
$scope.projects = [
{
title: 'TRU Colors Brewing Co.',
image: './images/tcb_screenshot.png',
url: 'https://www.trucolors.co',
category: ['development', 'design']
},
{
title: 'JOMO',
image: './images/jomo_screenshot.png',
url: 'https://jeffberlin.github.io/JOMO_website/index.html',
category: 'development'
}
];
and as pointed out in the comments your css might be causing the image to be hidden or not have a width or height. So when debugging don't forget to check the css.
Hello i'm working on a facebook game using unity3D, in the past i could just add the html code with custom configuration into the facebook canvas, but now in the new sdk and integration with unity facebook directly loads the unity3d file, ignoring all my custom html code and custom configuration.
In the documentation says that i can add custom html code in unity by using the external calls, but that means that the html header and modifications will only appear after the game is loaded and runing, is there a way to have the html header while the game is loading.
and, how i can modify the default logoimage, progressbarimage, etc.
Here is the uinty configuration and the code i have on my html document that i want to apply on my facebook game.
var config = {
width: 1024,
height: 768,
backgroundcolor: "FFFFFF",
bordercolor: "383838",
textcolor: "FFFFFF",
logoimage: "Resources/loading.png",
progressbarimage: "Resources/Loading-Bar_Full.png",
progressframeimage: "Resources/Loading-Bar_Empty.png",
disableContextMenu: true,
params: { enableDebugging:"0" }
};
var u = new UnityObject2( { params: config } );
Html header WIP
<div id="header">
<span>-Beta Build- | </span> My Game <br/>
<img alt="Header!" src="Resources/WebHeader.png"/>
<div id="like">
<img alt="Like Us" src="Resources/WebLike.png"/>
</div>
<div id="store">
<img alt="Earn Credits" src="Resources/WebCredits.png"/>
</div>
<div id="gift">
<img alt="Send Gift" src="Resources/WebSendGift.png"/>
</div>
<div id="help">
<img alt="Help" src="Resources/WebHelp.png"/>
</div>
</div>
Thanks.