I want to use Lightbox. Images are binding from back-end in VB.NET(database-sqlserver).
Here is HTML which is inside a datalist controler:
<a href='<%# Eval("images")%>' rel="lightbox[Brussels]">
<img alt="" src='<%# Eval("images")%>' height="150" width="150" class=" img img-thumbnail" />
</a>
I am not storing the images filepath. Just storing the images in varbinary(max) So cant give href attribute of Link.
I referenced hyperlink href attribute via dataurl.Its value is coming in base64
dr("images") = "data:Image/png;base64," & Convert.ToBase64String(imgbyte)
where imgbyte is byte array().
Whenever I am clicking on the Image(binded from database),it should come in front using Lightbox.
But problem is arousing as image poping out is partial clear or 30% clear rest blured or nothing at all.Don't know the exact reason why?
I have read somewhere that Internet Explorer 6 or 7 is not using dataurl. And it can show upto 32kb size image. But I have checked it in IE11.It does't work.
Any possibility how can we show images of big size using dataurl in LightBox?
Any other possibility how can we achieve this?
The only way I see is to implement a custom endpoint, say Generic Handler or a more tailored one, which returns a proper binary stream by providing the Identifier of the corresponding image.
For example
/MyCustomImageProvider.ashx?Id=1
This endpoint will be reachable via URL and such URL can be fed to LightBox, while keeping your images stored in a Table rather than a physical file.
In the end, your aspx code could like the following
<a href='<%# Eval("images")%>' rel="lightbox[Brussels]">
<img alt="" src="/MyCustomImageProvider.ashx?Id=<%# Eval("imageId")%>" height="150" width="150" class=" img img-thumbnail" />
</a>
Related
While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.
I know how to insert an image using add image avaible on Layout Panel or using HTML.
However I want to make a condition : If the image is not avaible or doesn't exist, there is a default image I want to display.
So I think I need to do it with js function.
What is the best way for it?
you can use image tag in html for that.
<img id="img" src="SomeImage.jpg" onerror="this.onerror=null; this.src=default.png" alt="" width="100" height="120">
I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links
I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.
For example, take a website about dogs:
From my understanding all img tags need an alt attribute:
<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />
Is it good practice to use the same alt attribute for multiple pictures on the same subject?
<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />
Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?
Example:
<ol title="This Dog">
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
<li title="This Dog"> Dogs </li>
</ol>
<div id="body">
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
<p title="This Dog"> </p>
</div>
My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.
My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.
No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).
title
The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:
The title attribute represents advisory information for the element […]
You should read the definition of the attribute, it explains how it should (not) be used.
alt
The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:
the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.
There are many rules how you should (not) use this attribute.
So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.
The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …
… the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
… keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
… screen readers often don't read/announce the title value (in the default settings)
ALT:
Alt text mean alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without alt text, an image will be displayed as an empty icon: without alt
In Internet Explorer Alt text also pops up when you hover over an image. Plus, Google officially confirmed it mainly focuses on alt text when trying to understand what an image is about.
An Image with alt but image is not displaying.
<img src="a.png" alt="Ann Smarty">
Another image without alt and image is not displaying.
<img src="a.png">
Title:
Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image: An image with title and displaying image.
<img src="a.png" title="Optimize Images For Search Engines, Social Media">
Read More:http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}