I am trying to implement a simple pictures gallery in my Vue.js app.
This what I am looking for:
User click on a thumbnail and a larger picture is displayed on the right. This is the code I've done so far:
<div class="col-md-6">
<div class="row" id="grid">
<div v-for="(picture, index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<div #click="picToShow= index">
<img class="img-thumbnail img-responsive" :src="picture.picture_1">
</div>
</div>
</div>
</div>
<div class="col-6 text-center my-auto">
<div v-for="(picture,index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<img v-show="pictToShow == index" :src="picture.picture_1">
</div>
</div>
But as I run it, I get this error :
[Vue warn]: Property or method "pictToShow" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
I do have in my <script>:
data () {
return {
pictures: [],
picToShow: null,
}
},
How can I fix it?
You're making a typo by adding an extra t in v-show="pictToShow == index" which should be v-show="picToShow == index", but I see that it's not a good practice to make two loops, i recommend to keep the first one and use the selected index to show its image :src="pictures[picToShow].picture_1":
<div class="col-md-6">
<div class="row" id="grid">
<div v-for="(picture, index) in pictures"
:key="picture.pk"
class="col-md-4 my-auto"
>
<div #click="picToShow= index">
<img class="img-thumbnail img-responsive" :src="picture.picture_1">
</div>
</div>
</div>
</div>
<div class="col-6 text-center my-auto">
<div v-if="picToShow!==null" class="col-md-4 my-auto">
<img :src="pictures[picToShow].picture_1" />
</div>
</div>
Related
i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item
Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
i have this kind html in my vue template: it is a simple list rendering
<div class="col-sm-6 col-md-4 col-lg-3" v-for="(lesson) in lessons" :key="lesson.id">
<div class="card card--elevated card-course overlay js-overlay mdk-reveal js-mdk-reveal "
data-partial-height="40" data-toggle="popover" data-trigger="click">
<a href="course.html" class="js-image" data-position="left">
<img :src="lesson.cover_image" alt="course">
<span class="overlay__content">
<span class="overlay__action d-flex flex-column text-center">
<i class="material-icons">play_circle_outline</i>
<small>Preview course</small>
</span>
</span>
</a>
</div>
</div>
the data-partial-height="40" , data-toggle="popover" and data-trigger="click" was working fine at first. but once i add the v-for="lesson in lessons" :key="lesson.id", and successfully generate the loop through the lessons array, all the styling is broken. i try to bind the value of data-partial-height="40", data-toggle="popover" and data-trigger="click" to the data property, but still nothing change. any solution?
Could it be that you're putting your v-for in the wrong element?
Right now you have it in you upper-level container <div class="col-sm-6 col-md-4 col-lg-3>" so, once you have more than one element in your list (say 10) you will end up with 10 <div class="col-sm-6 col-md-4 col-lg-3" containers that judging by the classes it uses most likely will be placed side-by-side.
In the other hand if you place your v-for in your inner container <div class="card card--elevated ... then the result for 10 elements will be somethig like:
<div class="col-sm-6 col-md-4 col-lg-3>
<div class="card card--elevated ...
<div class="card card--elevated ...
<div class="card card--elevated ...`
...
<div>
I'm just guessing but maybe this points you on the right direction, if you provide a minimal reproduction I'll be happy to help.
IMAGE :
How do I set a standard container size and also how do I size the images in a proper way so that the clarity of the images dont disturb and also gives a good look.
The images are of different sizes so dont know what to do exactly, should I set them to a standard size? or is there any better way?
CODE :
<div class="album py-5 bg-light">
<div class="container">
<div class="row ">
{% for job in jobs.all %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class = "card-img-top" src = "{{job.image.url}}">
<div class="card-body" >
<p class="card-text" >{{job.summary}}</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
if you are using bootstap 4 add a class property
<img class = "card-img-top" src = "{{job.image.url}}" class="img-fluid" >
my bootstrap code is like this ,It is just the view part of the code . And with this code i am having the spacing issue as given in the pic.
<div class="col-md-12">
<div v-for="post in posts">
<div class="col-md-6" style="float:left;position:relative;">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>#{{post.content}}</p>
<footer class="blockquote-footer">Status By <cite title="Source Title">#{{post.name}}</cite> <img :src="'{{Config::get('app.url')}}/img/' + post.pic" alt="Card image cap" height="30px" width="30px" style="border-radius:50%;"></footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
In bootstrap 4, you can use card deck if each card is of equal height: https://getbootstrap.com/docs/4.0/components/card/#card-decks
If not equal height, you can use card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns
This will automatically take care of spacing issue.
How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.