In a view, I have the following fieldset which displays images, in thumbnail type form, associated with a particular item:
<fieldset style="position:absolute; top:113px; left: 1050px; width: 300px;">
<legend>Photos</legend>
<div>
<img src="#Url.Action("GetImage1")" alt="" />
<img src="#Url.Action("GetImage2")" alt="" />
<img src="#Url.Action("GetImage2")" alt="" />
</div>
</fieldset>
In my controller, I have the following code:
public void GetImage1()
{
BicycleSellerListing bicyclesellerlisting = db.BicycleSellerListing.Find(1023);
WebImage wbImage = new WebImage(bicyclesellerlisting.ImageList.First().Image);
wbImage.Resize(100, 100);
wbImage.FileName = "Item.jpg";
wbImage.Write();
}
All of this works fine. I am fairly new to MVC, HTML and JavaScript, and don't know how to do the following. What I would like to do is to allow the user to click on an image and have another View load where I display the full size of the image in that view.
It depends what you want to get from this. Do you want it to display the image alone on a new page or show the full image on the same page using AJAX?
If it's the latter, you might want to look into using partial views.
Related
I have several images attached to an observable notebook. I'd like to show them all in a cell because the user can toggle through them with a dropdown select. Using an HTML cell, I have:
<style>
figure.small-example-img {
width: 20%;
height: 100px;
display: inline-block;
}
</style>
<figure class="small-example-img">
<img src=`${await FileAttachment('Side.PNG').url()}` />
<figcaption>Side: method one</figcaption>
</figure>
<figure class="small-example-img">
<img src=`${img_urls.houseurl}` />
<figcaption>house: method 2</figcaption>
</figure>
...and so on
In the first, I call the img url explicitly, and in the second I make a variable earlier to hold it. Both ways I end up with:
<figure class="small-example-img">
<img src="\`https://static.observableusercontent.com/files/24_rest_of_url_7a9\`">
<figcaption>Side</figcaption>
</figure>
If I put the URL directly into the src then it works fine.
What is the correct way to template this url into the html?
I suspect it has something to do with strange interpretation of the backticks?
There's an example file for this topic here but it doesn't have an image example
Observable does seem to treat backticks as a special thing. If you take them out it seems to work just fine.
<figure class="small-example-img">
<img src="${await FileAttachment('Side.PNG').url()}" />
<figcaption>Side: method one</figcaption>
</figure>
This is one of those it works, but I don't know why answers, so if anyone knows the details, I'd love to know too!
I am totally new to js and stuff like that, but I was made an admin and editor of an existing webpage of my employer. The problem is, I cannot contact a man, who has written the webpage, so its sometimes pretty hard to find out the paths and solutions of problems.
The problem I want to solve is on the page using Lightbox for image gallery. When you click on the first image, it pops out and works brilliant. But when you come to the end of the gallery, you can continue to the next car.
Here is the link to show what I mean: http://bmw-groupm.sk/vozidla-na-sklade/
Can you please at least try to tell me, if the problem is in CSS or script itself? Thank you.
It is not that simple. Cars are added to the webpage by separate Admin panel, which creates a directory on server, puts the images inside and than the car content is called by some complex process. See the html:
$adresar[$cislo] = opendir("vehicles/".$cisl[$cislo]."/");
while ($subor[$cislo] = readdir($adresar[$cislo])){
if ($subor[$cislo]!="." && $subor[$cislo]!=".." && !is_dir($subor[$cislo]) && $subor[$cislo]!="t" && $subor[$cislo]!="tn" && $subor[$cislo]!="mcith") {
$ext[$cislo] = pathinfo($subor[$cislo], PATHINFO_EXTENSION);
$ext[$cislo] = strtolower($ext[$cislo]);
if ($ext[$cislo]!="pdf") {
list($w[$cislo], $h[$cislo], $type[$cislo], $attr[$cislo]) = getimagesize("vehicles/".$cisl[$cislo]."/".$subor[$cislo]);
if ($w[$cislo]<$h[$cislo]) {
$iclass="imgh";
}
else {
$iclass="imgw";
}
$pas[$cislo].='<a rel="group" href="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"><img src="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"></a>';
} else {
$docu[$cislo]="/vehicles/".$cisl[$cislo]."/".$subor[$cislo];
}
}
}
The images are placed in links, which have the same rel="group" attribute.
Change these such that each car/gallery group of images has a different value from the next.
For example, car 1 gallery images will be rel="group1", and car 2 images will berel="group2".
You have to create an image set and give a specific name. The details are found here in the official website.
Documentation
You have to create an image set and give a specific name. You can provide the name in the data-lightbox attribute. You can find an example with dummy image links below.
<p>Gallery One</p>
<a href="https://dummyimage.com/600x400/b0a4b0/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/b0a4b0/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ff00ff/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ff00ff/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ed1520/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ed1520/ffffff" />
</a>
<p>Gallery Two</p>
<a href="https://dummyimage.com/600x400/17a621/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/17a621/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/0e2796/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/0e2796/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/616011/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/616011/ffffff" />
</a>
The details are found here on the official website.
I am running three photos in a js slideshow function, and I'm wondering if it's possible to have the first image in the slideshow display only when the side is FIRST loaded, but not when an user navigates to other pages in the site. If possible, I would like subsequent page loads to begin at the second or third image in the slideshow.
$(document).ready(function(){
$(function () {
setTimeout(playSlideShow, 6400);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 6400);
}
if (!$(currImgContainer).hasClass('secImg')) {
setTimeout(playSlideShow, 4500);
}
}
});
});
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
Storing data in the browser from previous page loads is pretty complicated and time consuming for a task like this.
Another option would be to set the carousel to display a different image based on which page it's being loaded on.
First, you can add a data attribute to a consistent element in each of your pages like this:
<body data-slideNum="2">
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
</body>
The, you can write some javascript to check that attribute on page load and set the carousel image number accordingly. Something like this:
var startingSlide = $('body').attr('data-slideNum');
Which, in this case would set 'startingSlide' equal to '2'.
Maybe you could use jQuery Cookie.
https://github.com/carhartl/jquery-cookie
On page load, check if the cookie is set, if not display the image and set it, if it is set don't do anything (assuming image is hidden by default).
Something like this:
if($.cookie('image') == undefined)
$('#image').show();
$.cookie('image', 'shown');
}
I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.
Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO
You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.
Basically in my ASP.NET MVC4 project I'm trying to have my validationmessages as tooltips (which gets displayed when hovered over a certain image).
Right now the error message is inserted into the image title - however I'd like to ONLY display the image when it has a title (when it doesn't have a title there is no error message).
How can I do this?
I don't suppose it is possible through CSS so a js/jquery solution would work too.
To clarify I need to check update the display as the title changes during runtime.
An initial check is not gonna do it.
Here is the pure CSS solution.
The CSS Code:
img{display:none;}
img[title]{display:block;}
Here is a WORKING DEMO
The HTML:
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" title="" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
The CSS:
img{display:none;}
img[title]{display:block;}
Hope this is what you are looking for.
Only display images with a title?
$('img').filter(function(i, el){
return !$(el).prop('title');
// (empty/undefined titles evaluates as false)
}).hide();
Is this what you're asking for?
Perhaps this css selector is enough (will only work in modern browsers):
img:not([title])
{
display: none;
}