I'm trying to use Vue to build my app but I have a problem with image loading speed. I have written a directive to control it:
<div style="width:1280px;height:800px;background-size:100% 100%" imgload="product.bgImg ">
<div class="backgroud" style="display: block" title="p1">
<div>{{product.productTitle}}</div>
<img src="" style="border-style:none" />
<div is="tip-compont" class="tips" v-bind:position="product.tips"></div>
<template v-for="r of product.rect">
<div is="rect-compont" shape="rect" v-bind:position="r" v-on:click="update()" ></div>
</template>
<template v-for="c of product.circle">
<div is="circle-compont" shape="circle" v-bind:position="c"></div>
</template>
</div>
</div>
Vue.directive('imgload',{inserted:function (el,binding,vnode,oldno) {
var img=new Image();
img.src=binding.value;
var sty='url('+binding.value+') no-repeat';
el.style.background=sty;
}})
But it doesn't seems to work. Images don't show on my screen.
You have to append a v- in your HTML to use it as Vue directive, like following:
<div style="width:1280px;height:800px;background-size:100% 100%" v-imgload="product.bgImg">
...
You can check more details in documentation.
Related
I did a little snippet where the image changes when you hover over it using x-bind, the change is very prompt so I wanted to add some transitions to it but it's not working. It seems x-transition might only work with x-show.
<div x-data="{image : 0}" class="h-3/5 mb-2 " >
<img class="h-full m-auto" x-bind:src="`/src/variants/${image}.jpg`" alt="" x-on:mousemove="image = 1" x-on:mouseout="image = 0" x-transition>
</div>
The documentation of x-transtion only talks about x-show. So it indeeds only works for x-show but why can't you use x-show? Hide the image with id 0 on hover and show the other image. Using x-transition on both of them?
Below a small example, you would still have to finetune this to your requirements offcourse. But x-transition works!
<script src="//unpkg.com/alpinejs" defer></script>
<div x-data="{hover : false}" class="h-3/5 mb-2" #mouseleave="hover=false">
<div #mouseover="hover = true">
<img x-show="hover" class="h-full m-auto" src="https://picsum.photos/id/237/200/300" alt="" x-transition>
<img x-show="!hover" class="h-full m-auto" src="https://picsum.photos/id/238/200/300" alt="" x-transition>
</div>
</div>
I have tried all the solutions on the internet but have not been able to print the pictures on the screen in any way. Am I making a very simple mistake? File names and folders are correct.
While giving the path, I want to get the picture registered with the name subclubName from the related folder by giving sub-club name from the data. E.g Art.jpg. I would be very happy if you could help.
<template>
<div>
<div class="container">
<a class="logo" href="#">Social Interest e-Club</a>
<div class="start">Start</div>
<div class="progress-bar-front bar"></div>
<div class="progress-bar-back"></div>
<div class="finish">Finish</div>
</div>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub,index) in subclubs" :key="index">
<img class="image" :src="'#/assets/sub-clubs-images/'+ 'subclub.subclubName'+'.jpg'" width="75">
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input checkbox" type="checkbox" v-model="subclubName" :value="index" >
</div>
</div>
<button #click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"result",
data(){
return{
subclubs:[
{
id:1,
subclubName:"Yoga",
score:70,
},
{
id:3,
subclubName:"Novel",
score:60,
},
{
id:4,
subclubName:"Piano",
score:45,
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
Just using "#/assets/" wont work to get root (src) directory url. Wrap the string with require() and remove quotations from subclub.subclubName variable
Like
<img class="image" :src="require('#/assets/sub-clubs-images/' + subclub.subclubName + '.jpg')" width="75">
Also you can use ES6 template literals to concatenate strings with variables as below
<img class="image" :src="require(`#/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">
you must use require. like this:
<img class="image" :src="require('#/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg')" width="75">
I spent lots of time trying to figure out getting a values from an element using jquery. Here's the code
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
Jquery Coe
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).text();
alert(showValue);
});
});
Example of return values: Admin School Board;
Expected value is should be "Admin or Finance"
NB: Any solution should consider outside div(school) clickable and not school-title div alone.
Warm regards.
Try the following jQuery code:
$(document).ready(function(){
// console.log('th');
$(document).on('click','.school .school-title', function(e){
e.preventDefault()
var th = $(this); //change over here
console.log(th.text());
});
});
You can change $(".school").click('.school-title', function(e){ to $(".school").on('click', '.school-title', function(e) { and it will solve the problem for you.
After updating your NB, you can use:
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
Demo
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You want a click anywhere in the school div to get the title - not just on the title itself. To do that, you just need to check for the school-title child element in the click function on school.
This will get all children with the class school-title (of which there will only be one - it works the same as find except on direct children only) and get the text from it:
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).children('.school-title').text();
alert(showValue);
});
});
/* Just for illustration to make it easier to see what is happening */
.school { border: 1px solid #ccc;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You only have one child with school-title in this case, but it will work with multiple titles if needed (e.g. if you did want to get "Admin School Board" for example, you could simply add the school-title class to the text-muted element).
Reference: jQuery children documentation
You are using 'school' class name for the click event and want to get the value child element of div. That is not possible in this way.
Simply Change the code "$(this).text();" to "$(classname,this).text();".
Happy coding.
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.