Is there a way to make the thumbnail images different from the fullsize images on a gallery using SlideJS plugin?
OUR SOLUTION:
We also didn't found anything on the documentation and solved it the following way:
Create a custom attribute on the HTML of the thumbnails gallery:
<div id="thumbnails">
<img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
<img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
<img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
[...]
</div>
<div id="slideshow"></div>
When some thumbnail gets clicked, make a copy of the thumbnails div HTML, switch the attribute values and set the slideshow:
$('#thumbnails img').click(function() {
// Get a copy of element instance of thumbnails div
var thumbnails = $(this).parent();
// On that copy, switch "img" attribute with "fullsize" attribute of each image
// and remove "fullsize" attribute for cleanliness
thumbnails.children('img').each(function() {
$(this).children().first().attr('src', $(this).children().first().attr('fullsize'));
$(this).children().first().removeAttr('fullsize');
});
// Set the switched HTML to the div that will hold the slideshow
$('#slideshow').html(thumbnails.html());
// Set the slideshow
$('#slideshow').slides({
start: 1,
preload: true,
generateNextPrev: true,
generatePagination: false,
effect: 'fade'
});
});
Related
I'm trying to create a simple gallery component where if you click on some image a Light-Box will appear where you can see full size photo and have options like next and previous photo or close the Light-Box.
Currently When I need to change the image to next or previous I change the src of the img-tag and it works.
Here comes my problem. I want to lazy load my images. I use lazysizes in my project.
So the simple implementation to have an image to load is to add the class "lazyload" and to pass the property data-src instead of src.
However if I change to data-src my methods for next and previous image are not working.
< script >
export default {
props: {
data: {
type: Array,
required: true,
},
},
data: () => ({
visible: false,
currentImage: 0,
}),
methods: {
Toggle(index) {
this.currentImage = index
this.visible = !this.visible
},
Next() {
if (this.currentImage !== this.data.length - 1) this.currentImage++
},
Prev() {
if (this.currentImage !== 0) this.currentImage--
},
},
} <
/script>
<template>
<div id="gallery" class="gallery">
<!-- images grid -->
<div v-for="(item, i) in data" :key="'gallery-image' + i" class="image">
<img :src="item.image.thumbnail.url" #click.native="Toggle(i)" class="lazyload"/>
</div>
<!-- image lighbox on click -->
<div v-if="visible" class="lightbox">
<Icon class="cancel" #click="Toggle()"/>
<Icon name="left" :class="{ disable: currentImage == 0 }" #click="Prev()"/>
<img :src="data[currentImage].image.url" class="lazyload"/>
<Icon name="right" :class="{ disable: currentImage == data.length - 1 }" #click="Next()"/>
</div>
</div>
</template>
UPDATE
I forgot to add crucial code. To implement lazysizes in a Nuxt project we need to add in nuxt.config.js the fallowing code. You can read more here.
build: {
extend(config, { isClient, loaders: { vue } }) {
vue.transformAssetUrls.img = ['data-src', 'src']
},
},
As I investigate in the developer tools I found that when triggering click for method like Next image, the src of the image does not change, only the data-src. I'm guessing I need a way to trigger this transform so that everything can work as expected.
Also, on top of my comment, I do recommend looking into the official nuxt image module which do have native lazy loading out of the box: https://image.nuxtjs.org/components/nuxt-img
You could maybe combo this with some simple lightbox that does the trick for you. I've used vue-silentbox before, it is working pretty well.
You can have that kind of code there
<silent-box :gallery="photosToDisplay">
<template #silentbox-item="{ silentboxItem }">
<img :src="silentboxItem.src" :key="silentboxItem.id" />
</template>
</silent-box>
So, I guess that you could totally swap img by a nuxt-img there, and have it lazy-loaded.
The images are not lazy-loaded in the project, but here is a small project that I did to try out the lightbox if you want to quickly look how it renders (URL in the top right corner).
Probably this is not the most elegant way to do it . I force re-render to my image component. You need to assign a key value to component and whenever the value changes a new instance creates of the component.
I am trying to use a Bootstrap slider with a custom handler. However, the value does not update when I move my slider.
HTML:
<input id="#ex6" type="range" data-slider-min="-5" data-slider-max="20"
data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span
id="ex6SliderVal">3</span></span>
JS:
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});
IMAGE
There is no need to add the # symbol to your id. The # symbol itself says you are referencing an ID.
<input id="ex6" [...] />
See also: CSS selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
Hy,
Is there a way to make hover on item image, but when is hover plays video?
Something like this but not in popup:
Demo
Thanks in advance
This is not possible out of the box.
I'm sure this is a paid extension for this but if you would like to code it the good old fashioned way you can use jQuery and HTML5 video player to achieve this.
<video id="video" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<a id="thumbnail">Im the thumbnail</a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery('#video').show();
jQuery('#video').play();
}, function() {
jQuery('#video').hide();
jQuery('#video').pause();
});
});
</script>
What I suggest is linking the video and thumbnail either via a data-attribute:
e.g
<a id="thumbnail" data-video="#video"></a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery(jQuery(this).data('video')).show();
jQuery(jQuery(this).data('video')).play();
}, function() {
jQuery(jQuery(this).data('video')).hide();
jQuery(jQuery(this).data('video')).pause();
});
});
</script>
on the thumbnail or making it relative to a parent container for multiple videos.
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});