Develop Reference

How can I append multiple div and img tags to a parent div in Vue3.js?

I'm a total newbie to the vue.js framework.
I'm trying to append multiple child tags to a parent div using vue3.js
Markups are like this:
<div class="partner-slider"> <!--this is parent div-->
<!--these are children-->
<!-- <div class="slide">
<img src="../assets/img/partner/0.png" />
</div>
<div class="slide">
<img src="../assets/img/partner/1.png" />
</div>
<div class="slide">
<img src="../assets/img/partner/2.png" />
</div> -->
</div>
And in vanillaJs, I did this, and it worked well
var mHtml = "";
for (var i = 0; i < 41; i++) {
mHtml +=
'<div class="slide"><img src="../assets/img/partner/' + i + '.png"></div>';
}
$(".partner-slider").append(mHtml);
$(document).ready(function () {
$(".partner-slider").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
//draggable: false,
//pauseOnHover: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 600,
});
});
But in Vue.js environmet, the script above doesn't work and it says the images are not found (404). How can I dynamically append images to the parent div so that I can use the slick slider after all images are loaded?
I was trying to use v-for method and did
<script>
export default {
data() {
return {
partners: [
{ url: "../assets/img/partner/0.png" },
{ url: "../assets/img/partner/1.png" },
{ url: "../assets/img/partner/2.png" },
{ url: "../assets/img/partner/3.png" },
],
};
},
};
</script>
but this looks pretty unefficient considering that I should append 41 images with the same way.

You can create an array using your desired length of numbers which will be used to generate the file name in the image path:
export default {
data() {
return {
partners: [...Array(10).keys()].map(num => ({
url: `../assets/img/partner/${num}.png`,
}))
};
},
};
Then use v-for for rendering it:
<div
v-for="path in data"
:key="path"
class="slide"
>
<img src="path" />
</div>

How to set class only for img element?

I'm using Cycle2 Carousel plugin and this plugin sets a class for my thumbnails it's not okey so far because this plugin set .cycle-pager-active class both image and div that's why I have to set this class for only images.if you check it out my #thumbnail div bottom of the body tag you will see (inspect element) I gotta fix this problem what should I do ?
What I tried ?
I change this line
pagerActiveClass: 'cycle-pager-active',
with this line:
pagerActiveClass: 'img.cycle-pager-active',
but nothing happend
$(document).ready(function(){
$(".mySlideShow").cycle({
pauseOnHover: true,
pagerActiveClass: 'cycle-pager-active',
pager: "#thumbnail",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item"
});
});
.mySlideShow img{
width:700px;
}
#thumbnail img {
margin:10px;
}
.cycle-pager-active{
border:3px solid orange;
}
<div class="mySlideShow">
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
</div>
</div>
<div id="thumbnail">
<div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
Codepen Demo

Even though I think a better approach is to play around with your HTML, and make sure the thumbnails div is only used for images, here is a solution to literally achieve what you asked for :)
Modify the addClass method
(function() {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("cssClassChanged");
// return the original result
return result;
};
})();
Then listen to cssClassChanged event and remove the active class from non img elements
$(document).ready(function() {
var $slider = $(".mySlideShow").cycle({
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item",
pagerActiveClass: "cycle-pager-active"
});
$("#single-pager > :not(img)").bind("cssClassChanged", function() {
$(this).removeClass("cycle-pager-active");
});
});
DEMO: https://codepen.io/anon/pen/ZJjEGQ

Just create a div that will have the thumbnail divas the child.
<div class="first-div">
<h1> Nice thumbnail! </h1>
<div id="thumbnail"></div>
</div>
Your code will only add the active class to the content inside the #thumbnail

jQuery select an image and then crop it

How do I crop my selected picture?
I've written web page that gives the user a choice to replace their current picture with a picture inside a carousel.
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="Pictures/PhotoAlbum/203.jpg" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="Pictures/PhotoAlbum/90.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/90.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/22.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/22.jpg"/>
</div>
<div class="item">
<img src="Pictures/PhotoAlbum/21.jpg" onclick="$('#ZoomAvatarPicture').attr('src','Pictures/PhotoAlbum/21.jpg"/>
</div>
</div>
When I click on the images in the carousel the ZoomAvatarPicture is replaced, as I expect it. I want to crop the newly selected ZoomAvatarPicture image. I've tried 3rd party cropping software (e.g. jQuery rcrop and imgAreaSelect) but their cropped images are of the original image, 203.jpg)
This is the code I added for rcrop:
jQuery(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
preserveAspectRatio: true,
minSize: [50, 50],
inputsPrefix: '',
grid: false,
});
$('#ZoomAvatarPicture').on('rcrop-changed', function e() {
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
})
});
And then I had a div to hold the cropped image
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
Since I got the same results for rcrop and imageSelect it leads me to believe that the problem isn't in the software but in my understanding of what can be done in jQuery.
Also, the demo page for rcrop is here: http://www.jqueryscript.net/demo/Responsive-Mobile-friendly-Image-Cropper-With-jQuery-rcrop/
I've added this code
function rcrop_Avatar()
{
var srcResized = $('#ZoomAvatarPicture').rcrop('getDataURL', 50, 50);
$('#cropped-resized').append('<img src="' + srcResized + '">');
alert('src = ' + $('#ZoomAvatarPicture').attr('src') );
}
function resetListener()
{
$('#ZoomAvatarPicture').off(onclick, 'rcrop-changed', rcrop_Avatar);
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
rcrop_Avatar();
}
jQuery(document).ready(function () {
App.init();
App.initScrollBar();
Datepicker.initDatepicker();
OwlCarousel.initOwlCarousel();
CirclesMaster.initCirclesMaster1();
StyleSwitcher.initStyleSwitcher();
$('#ZoomAvatarPicture').rcrop({
preserveAspectRatio: true,
minSize: [100, 100],
inputs: true,
inputsPrefix: '',
preview: {
display: true,
size: [200, 200],
wrapper: '#custom-preview-wrapper'
}
});
$('#ZoomAvatarPicture').on('rcrop-changed', rcrop_Avatar);
});
and modified the HTML to this:
<div class="item">
<img src="Pictures/PhotoAlbum/Work/90.jpg" onclick="$('#CurrentAvatarPicture').attr('src','Pictures/PhotoAlbum/Work/90.jpg');resetListener();"/>
</div>
I'm still getting the same results. (i.e. the cropped image is the original image, not the newly selected one).
The entire process is in a bootstrap modal. I'm starting to think I should forgo this route and put everything into a tabbed series of iframes.

Apparently, rcrop doesn't like to change properties or subject on the fly, and the destroy method is pretty messy, as it sometimes deletes the original object or leaves the preview display behind.
So, to avoid that, I changed a bit the behaviour to delete the remains and then recreate the image and attach it to the rcrop again.
Due to the size limit of the answers and not being able to upload the js and css of rcrop, i made this Codepen: http://codepen.io/LordNeo/pen/XpxVVv
Here is the relevant parts so you can check for modifications, for working example see the above CodePen.
$(document).ready(function () {
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
});
function changeImage(imgsrc) {
$('#ZoomAvatarPicture').rcrop("destroy");
$('#ZoomAvatarPicture').remove();
$('.rcrop-preview-wrapper').remove();
$('.rcrop-wrapper').prepend('<img id="ZoomAvatarPicture" src="'+imgsrc+'" height="200" />');
$('#ZoomAvatarPicture').rcrop({
full: true,
minSize : [50,50],
preserveAspectRatio : true,
inputsPrefix: '',
grid: false,
preview : {
display: true,
size : [100,100],
}
});
}
<div class="rcrop-wrapper">
<img id="ZoomAvatarPicture" src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG1" height="200" />
</div>
<div class="owl-carousel-v4 margin-bottom-40">
<div class="owl-slider-v4">
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG2')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG3')"/>
</div>
<div class="item">
<img src="http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4" onclick="changeImage('http://placehold.it/400x100/E8117F/FFFFFF?text=IMG4')"/>
</div>
</div>

Loading a video inside a toggler through Alloy UI (Liferay 6.2)

I am trying to display a video player inside a modal window in Liferay 6.2 through Alloy UI, with no luck. I have a simple portlet with the following structure in view.jsp:
<div id="myToggler">
<button class="header toggler-header-collapsed">Show Video</button>
<p class="content toggler-content-collapsed">
<div id="myVideo"></div>
</p>
</div>
In the main JavaScript file, main.js, the toggler is loaded into the #myToggler layer, and the video is loaded into the #myVideo layer, which is, in fact, inside the toggler. The video is not loaded into the toggler, though.
YUI ( ).use (
'aui-toggler',
'aui-video',
function (Y) {
new Y.TogglerDelegate ({
animated: true,
closeAllOnExpand: true,
container: '#myToggler',
content: '.content',
header: '.header',
transition: {
duration: .5,
easing: 'cubic-bezier'
}
}).render ( );
new Y.Video ({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render ( );
}
);
So, how can I load the video inside the toggler? Or, for that matter, how can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?

When I run your code I get:
Uncaught TypeError: undefined is not a function
This is due to the fact that, TogglerDelegate does not have a render() method. Also, you should not put a div into a p element. Instead, just make the toggler content into a div. See below for a runnable example:
YUI ( ).use (
'aui-toggler',
'aui-video',
function (Y) {
new Y.TogglerDelegate ({
animated: true,
closeAllOnExpand: true,
container: '#myToggler',
content: '.content',
header: '.header',
transition: {
duration: .5,
easing: 'cubic-bezier'
}
});
new Y.Video ({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render ( );
}
);
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div id="myToggler">
<button class="header toggler-header-collapsed">Show Video</button>
<div class="content toggler-content-collapsed">
<div id="myVideo"></div>
</div>
</div>
[H]ow can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?
One way to do this is to specify the outer widget's boundingBox and contentBox, and place the inner widget inside the contentBox of the outer widget. See below for a runnable example:
YUI().use('aui-modal', 'aui-video', function(Y) {
new Y.Modal({
boundingBox: '#bb',
contentBox: '#cb',
headerContent: 'Modal header'
}).render();
new Y.Video({
boundingBox: '#myVideo',
ogvUrl: 'http://alloyui.com/video/movie.ogg',
url: 'http://alloyui.com/video/movie.mp4'
}).render();
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<div id="bb">
<div id="cb" style="background-color: grey;">
<div id="myVideo">
</div>
</div>
</div>
</div>

Jquery with Sliing page and sliding images

i just finished the 5 Sliding page site, which each page i have image slider.
i am using Image slider within Page Slider. when i am trying to use the same image slider with different images for page slide 3, its not working. please help would be great Appreciate.
i am not good in Jquery, so i did lot of research and no luck...
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen2">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/1.jpg',
original: 'images/originals/1.jpg',},
{
preview: 'images/previews/2.jpg',
original: 'images/originals/2.jpg',},
{
preview: 'images/previews/3.jpg',
original: 'images/originals/3.jpg',},
{
preview: 'images/previews/4.jpg',
original: 'images/originals/4.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen3">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/5.jpg',
original: 'images/originals/5.jpg',},
{
preview: 'images/previews/6.jpg',
original: 'images/originals/6.jpg',},
{
preview: 'images/previews/7.jpg',
original: 'images/originals/7.jpg',},
{
preview: 'images/previews/8.jpg',
original: 'images/originals/8.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
i used the method below, and on first page slider, i am getting 2 image overlap, i need 3 small images in 3 page slider with different size
Link is http://theshoaibahmed.com/jquery.photocradle-0.4.2.js
here is the link for what i am trying to achieve and not working
http://www.theshoaibahmed.com/roman/
if you noticed i used
photocradle.$area = $( '' )
.appendTo( $( "#kitchen2") );
what option i can use so if i have to use 3 more image slider with different size, i would be able to use it.

That is because you have 2 different divs with same name class on the same page, and photocradle is confused to which one should he append the code.
Do like this:
<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#first' ).photocradle( params, options );
-
<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#second' ).photocradle( params, options );

Here is the link when i tried the technique above
http://www.theshoaibahmed.com/roman/