I have been searching this site for days looking for a solution. I would like to use javascript to take images from a folder on my server and put them into a set of like this. I thought it would be fairly simple but I've come up with nothing.
It would take the place of the divs below between the section tags in this code.
I could just hard code them all but there are 107 images that I need to display in this carousel and it would be much easier in the long run to be able to add/delete images from the folder than to do so by having to hard code them all.
Below is the code I have so far.
<section id="vendors" class="zerogrid">
<div width="90%" >
<div class="container" width="90%" style="background-color: #858585;">
<h2 class="clr-1" style="padding: 2%;" >Our Suppliers</h2>
<section class="customer-logos slider" style="padding-bottom: 5%;">
<div class="slide"><img src="images/image1.png"></div>
<div class="slide"><img src="images/image2.png"></div>
<div class="slide"><img src="images/image3.png"></div>
</section>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 106
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});
</script>
</section>
This carousel works fine, sp any help getting the thing sorted would be greatly appreciated.
Add id by:
<section class="customer-logos slider" style="padding-bottom: 5%;" id="customer-logos-slider">
And add this to your script tag:
window.onload = function () {
let toAdd = '';
let totalImages = 107;
for (let i = 0; i < totalImages; i++) {
toAdd += '<div class="slide"><img src="images/image' + i + '.png"></div>';
}
document.getElementById('customer-logos-slider').innerHTML = toAdd;
}
I have been working with this bit of code. It is placing image placeholders but all of them are displaying at one time and not is separate divs. Also the 5th line of code that is setting each image with a number. I would like the javascript to pull the file name from each image in the folder, place it in a div (similar to line 6) and then repeat it the end of the images.
<script type="text/javascript">
window.onload = function () {
let toAdd = '';
let totalImages = 107;
for (let i = 0; i < totalImages; i++) {
toAdd += '<div class="slide"><img src="images/vendors/' + i + '.jpg"></div>';
}
document.getElementById('logos').innerHTML = toAdd;
}
</script>```
This last iteration of the tinkering leaves me with a large space in the section that contains nothing but I am guessing it's loading empty files due to the numbering. Any other thoughts from anyone?
Related
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>
I am missing some really basic stuff here. I am setting nav and navText options according to docs, and I can see buttons content being changed in DevTools, but they keep being disabled and hidden. What am I missing? I am using v2.3.4. Browsed plenty of question, but could not find anything similar
<div class="owl-carousel quote-carousel">
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
auto: true,
nav: true,
navText: ["<div>LEEEEFT</div>", "<div>RIIIIGHT</div>"]
});
});
</script>
Owl Carousel does not respect nav and navText when there is single item in container, but I had loop: true flag!! Thats why I expected it to work.
Code from sources:
Navigation.prototype.draw = function() {
var difference,
settings = this._core.settings,
disabled = this._core.items().length <= settings.items,
index = this._core.relative(this._core.current()),
loop = settings.loop || settings.rewind;
this._controls.$relative.toggleClass('disabled', !settings.nav || disabled);
if (settings.nav) {
this._controls.$previous.toggleClass('disabled', !loop && index <= this._core.minimum(true));
this._controls.$next.toggleClass('disabled', !loop && index >= this._core.maximum(true));
}
This line
disabled = this._core.items().length <= settings.items,
can be simplified to disabled = 1 <= 1 in my case.
So, in order to display "single" item in owl carousel and still show controls, I have to put at least two items in container
<div class="owl-carousel quote-carousel">
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
<div class="quote-text">"Where are navigation controls??"</div>
<div class="quote-name">John Doe, Hampshire</div>
</div>
</div>
My JavaScript slideshow is acting a little wonky. When I load the page the slide show pictures are visible, but it shows all the photos in the slideshow.
After a couple of seconds, it does decompress to one photo showing, and works how it's supposed to, flipping through each one at a 5 second pace.
However, no matter what I do, it still shows all the pictures at the beginning, which defeats the point...
This is my HTML:
<div class="container">
<div style="display: inline-block; ">
<img class="mySlides" src="../images/fullshot1.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides2" src="../images/unnamed.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides3" src="../images/fullshot2.jpg">
</div>
</div>
And this is my Jquery/JavaScript:
$(document).ready(function() {
console.log( "document loaded" );
//declare section variables
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//how to click and make it work
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
//interval time
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
//this closes the doc ready
});
Can anybody help me with this/has had this problem too? Thanks!
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>
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>