I want to hide all images which have no data-web-src attribute on 767px. I tried the following but I failed; how can I do that?
$('#homepage-carousel .lazy_res').each(function(index, value) {
var ws = $(window).width();
var large = 1024;
var medium = 767;
var small = 0;
if (ws <= medium) {
$(this).not('[data-web-src]').hide();
} else {
$(this).not('[data-web-src]').show();
}
});
img {
width: 500px;
float: left;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
<img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" />
<img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg">
</div>
Codepen Demo
This should be done with CSS Media Queries. No JavaScript required.
/* Set page default styles and styles that should only
be in effect for viewports under 767px wide here. */
img {
width: 500px;
float: left;
margin-right: 10px;
}
/* Apply the following CSS only to viewports wider than 767px */
#media (min-width: 767px) {
/* Select all images except those with an attribute of: dat-web-src */
img:not([data-web-src]) {
display: none; /* Hide the matching elements */
}
/* Make any other CSS changes you like here */
/* This class will only be applied to images when the media query
is in effect. */
img.someNewClass {
/* Whatever you need here */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
<img class="lazy_res" src="http://localhost:82/works/anitur/img/slider/1.jpg" alt="" />
<img class="lazy_res" src="http://localhost:82/works/anitur/img/assets/mice-1.jpg">
</div>
You need to set your code within a function and then it can be called onload and also onresize to test it:
see https://api.jquery.com/on/
Description: Attach an event handler function for one or more events to the selected elements.
function testit() {
$("#homepage-carousel .lazy_res").each(function(index, value) {
var ws = $(window).width();
var large = 1024;
var medium = 767;
var small = 0;
if (ws <= medium) {
$(this).not('[data-web-src]').hide();
} else {
$(this).not('[data-web-src]').show();
}
});
}
$(window).on('resize load', testit );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
below 767px wide, you'll see nothing else here :), use the full page mode to test the snippet. then resize the window
<div id="homepage-carousel">
<img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" />
<img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg">
</div>
https://codepen.io/gc-nomade/pen/EXLZEN
Related
I added an image to the Trix editor, generating the following code:
<figure
data-trix-attachment="{lots of data}"
data-trix-content-type="image/jpeg"
data-trix-attributes="{'presentation':'gallery'}"
class="attachment attachment--preview attachment--jpg">
<img src="http://myhost/myimage.jpg" width="5731" height="3821">
<figcaption class="attachment__caption">
<span class="attachment__name">cool.jpg</span> <span class="attachment__size">4.1 MB</span>
</figcaption>
</figure>
When I display the generated HTML from the editor on my Bootstrap-based page, the image obviously extends the screen (see the width and height) and I'd like to remove these props and also assign the img-fluid class to it.
So basically I thought to use the config:
Trix.config.css.attachment = 'img-fluid'
But that does a) not change the attachment class to img-fluid and it also would not apply the changes to the image but the figure.
I would like to avoid using jQuery each time I display the content and traverse all figures and then manipulate the image's properties at runtime.
Isn't there a solution to define these styles when adding the attachment?
Trix does not have any kind of support to change the image element inside the attachment. One way to do it is by using MutationObserver to check for mutations inside Trix editor that apply to attributes, childList and subtree.
If we have a width or height attributes mutation to an img target node with a figure parent node, then we remove those attributes and we can apply the class img-fluid to the first attribute mutation, for example width.
Run code snippet and try to add some image attachments to see or inspect the HTML
Please read inline comments
// Listen to trix-attachment-add event so we'll get rid of the progress bar just for this demo
// Here we should upload the attachment and handle progress properly
document.addEventListener("trix-attachment-add", event => {
const { attachment } = event.attachment;
// Get rid of the progress bar
attachment.setUploadProgress(100)
});
// Get the Trix editor
const editor = document.querySelector('trix-editor');
// Instantiating an observer
const observer = new MutationObserver(function (mutations) {
mutations.forEach(({ type, target, attributeName }) => {
// If the parent is a figure with an img target
if (target.parentNode.tagName === 'FIGURE' &&
target.nodeName === 'IMG')
{
if (type === 'attributes') {
switch(attributeName) {
// If we have attribute width
case 'width':
// Remove attribute width
target.removeAttribute('width');
// Add img-fluid only once
target.classList.add('img-fluid');
break;
// If we have attribute height
case 'height':
// Remove attribute height
target.removeAttribute('height');
break;
}
}
// Render images HTML code
renderHtmlOutput();
}
});
});
// Observing Trix Editor
observer.observe(editor, {
attributes: true,
childList: true,
subtree: true
});
// Function to render every figure > img HTML code
function renderHtmlOutput() {
const images = editor.querySelectorAll('figure > img');
let output = '';
for(const image of images) {
output += image.outerHTML.replace(/ /g, "\n ") + "\n";
}
document.getElementById('output-html').textContent = output;
}
body {
height: 100vh;
margin: 0;
flex-direction: column;
display: flex;
}
#main {
display: flex;
flex-direction: row;
flex: 1;
margin: 10px;
}
#editor-container {
flex: 3;
}
#output-container {
flex: 2;
margin-left: 20px;
border-left: 1px solid lightgray;
overflow: auto;
}
#output-html {
margin: 0;
padding: 10px;
font-size: small;
color: blue;
}
/* Hide some Trix buttons to free horizontal space */
.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-bullet-list,
.trix-button--icon-number-list { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.js" integrity="sha256-2D+ZJyeHHlEMmtuQTVtXt1gl0zRLKr51OCxyFfmFIBM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.1/trix.css" integrity="sha256-yebzx8LjuetQ3l4hhQ5eNaOxVLgqaY1y8JcrXuJrAOg=" crossorigin="anonymous"/>
<section id="main">
<div id="editor-container">
<form>
<input id="editor" value="Editor content goes here" type="hidden" name="content">
<trix-editor input="editor"></trix-editor>
</form>
</div>
<div id="output-container">
<pre id="output-html"></pre>
</div>
</section>
I'd like to use a large background image for desktop users and a different smaller background image for mobile users.
I found this answer
.img-responsive.mobile {
display: none;
}
#media only screen and (max-device-width: 480px) {
.img-responsive {
display: none;
}
.img-responsive.mobile {
display: block;
}
}
<div class="row">
<img src="image\bannerimages\Career.png" class="img-responsive careerpage">
<img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
how-to-display-different-images-in-mobile-and-desktop-devices
Problem with this solution is it loads two images - I'd like to only load the image necessary. How can this be done?
Using pure Javascript
javascript:
<script>
var screenWidth = screen.width;
var imgElement = document.createElement("img");
var imgUrl;
if(screenWidth < 480) {
// for mobile devices
imgUrl = document.createTextNode("url of img 1");
} else {
// otherwise
imgUrl = document.createTextNode("url of img 2");
}
var row = document.getElementByClassName("row");
row.insertBefore(imgElement, row.childNodes[0]);
</script>
html:
<div class="row">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
I think html code is crystal clear so I just describe javascript code. first of all gets width of screen then checks whether it is a mobile device or others. then inserts url of proper image in created element and finally inserts it as the first element of div.row element.
Also you can do this easier using jQuery.
<div class="row">
<img id="img1" src="image\bannerimages\Career.png" class="img-responsive careerpage">
<img id="img2" src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
var w = window;
var x = w.innerWidth;
if(x<568){
document.getElementsById('img2');
}
else{
document.getElementsById('img1');
}
Not sure without a full syntax, try this way Hope it works)
I'm trying to set up a simple gallery with thumbnails and a main content section. When a thumbnail is clicked, I would like a larger version of the image along with text to display in the main content section. I've got the code for the images down, but can't figure out how to add text on each click. I haven't started doing any styling yet, but the basic code is below. Any help would be much appreciated.
Thanks!
JavaScript:
var mainImg = document.getElementById('Main');
document.getElementById('One').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297';
mainImg.innerHTML = imagetitle;
//alert('one clicked');
};
document.getElementById('Two').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297';
mainImg.innerHTML = 'imagetitle';
//alert('two clicked');
};
document.getElementById('Three').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297';
//alert('two clicked');
};
CSS:
#One, #Two, #Three {
width:100px;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#One:hover, #Two:hover, #Three:hover {
width:100px;
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
HTML:
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" />
http://jsfiddle.net/f9B8H/72/
Let's clean this up a bit.
HTML
<div id="container">
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<p id="caption"></p>
</div>
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="I'm a soldier" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="My family" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="Dad" />
Notice how I've stored the caption in the alt attribute. A data attribute could also work.
JAVASCRIPT
function displayImage() {
var mainImg = document.getElementById('Main');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
document.getElementById('Three').onclick = displayImage;
Fiddle: http://jsfiddle.net/g2hY4/
The simplified function works so well because you are using the same image for thumbnail as main image. If you didn't do that, we could store the big image address in a data attribute also.
Here's one way to load the first caption when the page loads. Put it after the code I've already shown you:
displayImage.call(document.getElementById('One') );
You can read about call here. In a nutshell, it redefines the value of this in the displayImage function.
New fiddle
Something to think about is where you want the caption and how it's styled can be set in CSS. I've left that to you also. Absolute positioning will work if the positioning of #container is set to relative.
My implementation gets the text from the attribute alt(could be title) I think this way can be more elegant
document.getElementById('textSubtitle').innerHTML = this.alt;
http://jsfiddle.net/WKfc5/
If you are okay with using jQuery, here is something that I made up real quick. I hope it is useful. [Fiddle]
HTML
<div id="gallery">
<div class="preview">
<img class="previewImg" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="" />
<div class="previewText"></div>
</div>
<div class="thumbnails">
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="Image 1" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" title="Image 2" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" title="Image 3" />
</a>
</div>
</div>
CSS
#gallery {
overflow: hidden;
}
#gallery .preview {
float: left;
position: relative;
}
#gallery .previewImg {}
#gallery .previewText {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 100px;
background: rgba(0,0,0,0.7);
color: #fff;
font: normal 12px arial;
padding: 10px;
}
#gallery .thumbnails {
float: left;
width:100px;
}
#gallery .thumbnails a, #gallery .thumbnails img {
display: block;
}
#gallery .thumbnails a img {
width: 100%;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#gallery .thumbnails a:hover img {
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
JS
$(function(){
var gallery = $("#gallery"),
thumbnails = gallery.find(".thumbnails a"),
previewImg = gallery.find(".previewImg"),
previewText = gallery.find(".previewText");
thumbnails.on("click", function(e){
var thumbImg = $(this).find("img");
previewImg.attr("src", thumbImg[0].src);
previewText.html(thumbImg[0].title);
});
});
I'd call the onclick from the image itself instead of adding the onclick via JS to the image.
You're doubling your work.
Where do you want the text to be displayed?
If it has to be displayed on top of the image, you'll have to make the image a background-image of a div or so.
If the text has to be above/under the image, place a span above/under the image and give it an ID.
Working with a span
JS:
function showBig(srcBig, title) {
var mainImg = document.getElementById('MainImg');
var mainText = document.getElementById('MainText');
mainImg.src = srcBig;
mainImg.title = title;
mainText.innerHTML = title;
}
HTML:
<div id="main">
<span id="MainText">Title will come here</span>
<img src="Default Img" alt="Big img's will come here" />
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
Working with BG-image
JS:
function showBig(srcBig, title) {
var mainDiv = document.getElementById('MainDiv');
MainDiv.style.backgroundImage = srcBig;
MainDiv.innerHTML = title;
}
HTML:
<div id="MainDiv">
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
By the way, you can ofc still add the onClicks via JS:
document.getElementById("yourImg").onclick = showBig('URL of Big', 'Title');
By the way, Don't use the same img for the thumbnails.
You'll probably use some big images which takes longer to load and then display it much smaller via CSS.
Make a smaller version (e.g. 100x100px or whatever size the thumbs should be) and only load the bigger version when the onClick is called.
Also, you better use a CSS-class like .thumbs to style the thumbs.
Otherwise you'll have to add a new ID to the list in your CSS file everytime you add a new image.
JSFiddle
I want to remove the sidebar when the window is resized below a certain width. And then show it again when the window is expanded.
Html:
<style type="text/css">
#sidebar{
width:290px;
float:right;
/*...*/
}
#header{
margin-right:290px;
/*...*/
}
#navigation{
margin-right:290px;
/*...*/
}
#page{
margin-right:290px;
/*...*/
}
</style>
<div id="wrapper">
<div id="sidebar">
...
</div>
<div id="header">
...
</div>
<div id="navigation">
...
</div>
<div id="page">
...
</div>
</div>
Javascript:
<script type="text/javascript"><!--
function sbar_check(){
var page = $("#page");
var header = $("#header");
var navigation = $("#navigation");
var sidebar = document.getElementById("sidebar");
//get width of page
var pagew = page.width();
if(pagew < 451) {
//hide
sidebar.style.display = 'none';
header.css('marginRight', '0');
navigation.css('marginRight', '0');
/*
//error
page.css('marginRight', '0');
*/
} else {
//show
/*
header.css('marginRight', '290');
navigation.css('marginRight', '290');
page.css('marginRight', '290');
*/
sidebar.style.display = 'block';
}
}
//initial sidebar check
$().ready(function(){
sbar_check();
});
//sidebar check on resize
window.onresize = function(event){
sbar_check();
};
//--></script>
The line that causes the unexpected behavior is marked with //error.
If I leave this line uncommented, both the header and the navigation container expand and the sidebar gets removed.
But if I uncomment the line, the sidebar is NOT removed.
I have no explanation for this behavior.
A much cleaner way to do this is to use media queries.
#media (max-width: 451px) { /*when the screen is less than 451px wide*/
#sidebar {
display: none; /*hide the sidebar*/
}
/*more CSS to change margins, etc...*/
}
I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?
You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}
Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>
Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});
In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.