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

JS script only applied after window resized

I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.

Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>

why plugin is not initializing dynamically

$("#" + IdToInitialize).cycle("destroy").cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Whats the problem here , why cycle plugin is not initializing again with new settings?

Try this way:-
$("#" + IdToInitialize).cycle("destroy");
$("#" + IdToInitialize).cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Make sure
$("#cyclescroll").val() should return the values as fade, scrollUp, shuffle
$("#cyclebounce").val() should return the values as easeInOutBack, easeOutBack
Refer Cycle Options

One of the values you are using to reinitialize your plugin is incorrect. Eitehr IdToInitialize, fx, or easing are not correct.
http://jsfiddle.net/ny2Tj/3/
The following works as expected when clicking on the button:
<div id="sliders">
<div id="slideshow">
<img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
<img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
<img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
<img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
<div id="pager"></div>
</div>
<button id="reinit">Reinit</button>
JS:
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager'});
$('#reinit').click(function() {
$('#slideshow').cycle('destroy').cycle({fx:'scrollVert'}); // change effect remove pager
});

Is it possible to add a link in the image that shows up in slimbox?

I have an image gallery and I'm using slimbox in it. I want to know if it's possible to add a link in the image that shows up after clicking/hovering an image in the gallery, because I was able to add a link in the title/caption.
<a rel='slimbox' href="images/img2.jpg" title="<a href="http://www.google.com" >Google</a>">
<img class="cloudcarousel" src="images/img1.jpg" width="128" height="164" alt="" />
</a>

Yes. You can add the title/caption to each image. But you can not add a link to image directly. Try to add link in caption as in Slimbox demo. Please check the source. You can get some idea to customize.
<script type="text/javascript">//<![CDATA[
window.addEvent("domready", function() {
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
$$("a[href^=http://www.flickr.com/photos/] > img:first-child[src]").getParent().slimbox({
loop: true,
initialWidth: 1024,
initialHeight: 768,
overlayOpacity: 0.6,
overlayFadeDuration: 200,
resizeDuration: 1000,
resizeTransition: Fx.Transitions.Elastic.easeOut,
counterText: "This is image <strong>{x}</strong> on a total of <strong>{y}</strong> in this fabulous Flickr image gallery",
previousKeys: [37, 80, 16],
nextKeys: [39, 78, 17],
}, function(el) {
return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
(el.title || el.firstChild.alt) + '<br />Visit the Flickr page for this picture.'];
});
}
try {
_gat._getTracker("UA-760577-1")._trackPageview();
} catch(e) {}
});
//]]></script>
<h2>Customization</h2>
<p>You can change every parameter of Slimbox and make it work with any kind of link or element.<br />
Below is an example of integration with Flickr links and custom options.</p>
<p><img src="http://farm1.static.flickr.com/159/345009210_1f826cd5a1_t.jpg" alt="A nice bee." /><img src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_t.jpg" alt="Flowers" /></p>