I am working on a product page which has an Image gallery on the left and color selections on the right.
See the below image.
Now every time a color is selected a set of image has to be shown on the left. The way it is implemented right now is that every time the color selection is updated the store value for SelectedImages changes with the array of that particular color.
Now it makes sense that, whenever I switch to a new color the image is loaded. Which is happening.
But the issue I am facing is that whenever the color is changed, and the SelectedImages array is updated the images are loaded, no matter that they were loaded earlier. I don't want it to load again (send http) when it has already called the image once.
Also, I don't want to load all the images (4 color x 4 images = 16 Images) at once which would again be not performant.
I have created this UI using vue. It's not a vue single app, but it has vue component at some places where needed.
Code that renders Image.
<div class="desktop-gallery"
:class = "{ 'is_loading': isLoading }"
v-bind:style="parentStyle"
v-show="!onlyMobile">
<div class="gallery-item"
v-for="(image, index) in images" :key="index"
ref="variableGallery"
#click="handleGalleryZoom(index)"
>
<img :src="image"/>
</div>
</div>
Related
I am creating a website for the first time with Bootstrap3 and have a page with 3 images which will be links to galleries. These images are not thumbnails.
I have alternative images (B+W) for hovering and so my code currently changes the image from colour to B+W on hover.
I want to be able to also include a text overlay on hover so people will know to click through to the gallery. So, I'm looking to add text on hover to the B+W image. Alternatively, I would make the colour image less opaque and add text to that, if it's easier!
Here's my html code currently.
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
Thanks in advance.
try adding a title attribute :
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
I'm doing a Phonegap App with JQueryMobile.
The different pages have different Background Images (defined by jquery code) and I'm seeing a disturbing behavior when the user enter the page ONLY THE FIRST TIME.
The problem is it occurs a resizing of the image in the first second. That is, when the user enter the page it shows a resolution, and a second after, the image resize again. And after that I can exit and enter again that page and DOES NOT RESIZE.
The HTML that define the page:
<div id="pageHoja1" class="divPagina" data-role="page">
</div>
<div id="pageHoja2" class="divPagina" data-role="page">
</div>
<div id="pageHoja3" class="divPagina" data-role="page">
</div>
The CSS of that page changes dynamically:
In the on-device-ready:
$(".divPagina").css("background-size","cover");
On the function that decides the background image:
$("#pageHoja" + i).css("background-image", "url('mycharts/" + sFileBackg + "')");
Ideally I would like to NOT RESIZE AT ALL (because I want the original size). But if that is impossible, at least I want the resize to occur before it shows to the user.
I've already tried this but with same results... ;(
$.mobile.loadPage("#pageHoja" + i);
$("#pageHoja" + i).page(true);
and I've checked the CSS of background-size BEFORE and AFTER (with an alert message) and both gives "cover" value...
Any ideas? Thanks!
I have two images contained in one div and am trying to align the second image next to the first. If I assign each image a class, how can I get the second image to be aligned with the first using css? Or is it best to have a div for each image?
<div class="standard">
<img src="images/room02.jpg"/>
<img src="images/room04.jpg"/>
</div>
You don't need a separate div or class for each image. It all depends on how you want to align them. Just see this guide for more information: http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)