I am trying to create a view with a list of images.
This is my code:
<ul class="gallery">
#foreach (string item in Model)
{
<li>
#{
string parameterValue = "/PhotoGallery/" + item.ToString();
}
<img src=#parameterValue height="180" />
</li>
}
</ul>
I have problems when the file name contains space.
Example:
<li>
<img src=/PhotoGallery/DSC_0901.JPG height="180" />
</li>
<li>
<img src=/PhotoGallery/name with space.jpg height="180" />
</li>
I get the error:NetworkError: 404 Not Found - http:// localhost:6538/PhotoGallery/name
You've missed the double quotes it should be:
<img src="#parameterValue" height="180" />
Related
I am currently trying to create some kind of movie info page like what you see in cinemas where I grab images and titles from another source.
What my code should do is when the pictures from image slide change, it should highlight the corresponding title to show what movie it is but I am not sure how to properly connect between the images and the texts.
Any help would be appreciated thanks.
html:
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<c:forEach var="img" items="${moviedata }" varStatus="no">
<a href="../movielist/MDetail?mid=${img.mid }"><li class="home_li"><img src="../m_img/movie/${img.imgurl}"
alt="" width="500px" height="600px" name="color${no.index }" /></li></a>
</c:forEach>
</ul>
</div>
</td>
<td>
<!-- movielist-->
<div>
<ul class = "mlist">
<c:forEach var="rank" items="${moviedata }" varStatus="no">
<li>
${no.index + 1 }. ${rank.name }
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
html Result :
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<a href="../movielist/MDetail?mid=11"><li class="home_li"><img src="../m_img/movie/82019_1000.jpg"
alt="" width="500px" height="600px" name="color1" /></li></a>
<a href="../movielist/MDetail?mid=25"><li class="home_li"><img src="../m_img/movie/82060_1000.jpg"
alt="" width="500px" height="600px" name="color2" /></li></a>
<a href="../movielist/MDetail?mid=1"><li class="home_li"><img src="../m_img/movie/82078_1000.jpg"
alt="" width="500px" height="600px" name="color3" /></li></a>
<a href="../movielist/MDetail?mid=5"><li class="home_li"><img src="../m_img/movie/82133_1000.jpg"
alt="" width="500px" height="600px" name="color4" /></li></a>
<a href="../movielist/MDetail?mid=23"><li class="home_li"><img src="../m_img/movie/82093_1000.jpg"
alt="" width="500px" height="600px" name="color5" /></li></a>
<a href="../movielist/MDetail?mid=4"><li class="home_li"><img src="../m_img/movie/81905_1000.jpg"
alt="" width="500px" height="600px" name="color6" /></li></a>
<a href="../movielist/MDetail?mid=6"><li class="home_li"><img src="../m_img/movie/82190_1000.jpg"
alt="" width="500px" height="600px" name="color7" /></li></a>
<a href="../movielist/MDetail?mid=3"><li class="home_li"><img src="../m_img/movie/82224_1000.jpg"
alt="" width="500px" height="600px" name="color8" /></li></a>
<a href="../movielist/MDetail?mid=7"><li class="home_li"><img src="../m_img/movie/82129_1000.jpg"
alt="" width="500px" height="600px" name="color9" /></li></a>
</ul>
</div>
</td>
<td>
<!-- movielist -->
<div>
<ul class = "mlist">
<li>
1. Movie Name 1
</li>
<li>
2. Movie Name 2
</li>
<li>
3. Movie Name 3
</li>
<li>
4. Movie Name 4
</li>
<li>
5. Movie Name 5
</li>
<li>
6. Movie Name 6
</li>
<li>
7. Movie Name 7
</li>
<li>
8. Movie Name 8
</li>
<li>
9. Movie Name 9
</li>
<li>
10. Movie Name 10
</li>
</ul>
</div>
</td>
</tr>
</table>
CSS:
<style>
.mlist{
list-style:none;
display:flex;
align-content:flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
text-align: left;
}
.mlist li {
display:inline-block;
border:1px solid black;
border-top: 1px solid black;
width:260px;
height:50px;
margin:3px 0 0;
}
.mlist li:hover {
border:1px solid red; height:50px;
}
</style>
JavaScript:
const all = ele => document.querySelectorAll(ele)
const one = ele => document.querySelector(ele)
const slide = _ => {
const wrap = one('.slide')
const target = wrap.children[0]
const len = target.children.length
target.style.cssText = width:calc(100% * ${len});display:flex;transition:1s
Array.from(target.children)
.forEach(ele => ele.style.cssText = width:calc(100% / ${len});)
let pos = 0
setInterval(() => {
pos = (pos + 1) % len
target.style.marginLeft = ${-pos * 100}% }, 3000)
}
window.onload = function () {
slide()
}
I suggest you keep track of your slide with variables.
When you navigate you could use these 2 variables to hold the ID of the element you want to highlight now and the element on which you want to remove the highlight. And run this script every time you change the slide.
In your case i believe your using positions. so apply the style to that new position and remove it from the old position.
Now for what is linking the text to the image depends on what your doing. The could share a same position value or they could share a container element. And if you plan on using you position with the ID attribute, remember that an id attribute can not start with a number. So I usualy concatenate a string with a numeric value.
"myElementId_"+ pos
Result in myElementId_1 which is valid html
Now just add style to this element and remove it from last.
I have a html list which consists of multiple items, each of which is composed of some text and an image.
I want the following:
all items must fit in one page (no scrollbar)
each item must have the same height (resize the image to fit the item height)
The image must use the remaining space in the item list, which is not taken by the text
Edit: so just to be clear, assuming the browser height is X, and there are n list items (li), each li should have a height of X/n pixels, so that they all fit within the browser height without any scrollbar. And from there, inside each li, the text should take whatever space it needs, and the image should fill the remaining space
I have tried playing with height & max-height but it doesn't seem to work. Should I change the html layout ?
Here is the html code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div>
<ul>
<li>
<div>title1</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title2</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title3</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title4</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title5</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title6</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title7</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
<li>
<div>title8</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
</li>
</ul>
</div>
</body>
<html>
I don't reckon this is possible with CSS only. A JS solution would be like below:
document.addEventListener("DOMContentLoaded", setLiHeight);
window.addEventListener("resize", setLiHeight);
function setLiHeight() {
let ul = document.querySelector("ul");
let lis = ul.querySelectorAll("li");
let title = ul.querySelector("div");
let images = ul.querySelectorAll("img");
// Set height for lis
Array.from(lis, function(li) {
li.style.height = ul.offsetHeight / lis.length - 1 + "px";
});
// Set height for images according to height title
Array.from(images, function(img) {
img.style.height = ul.offsetHeight / lis.length - title.offsetHeight + "px";
});
}
html,
body {
margin: 0;
}
ul {
height: 100vh;
margin: 0;
}
li img {
width: auto;
}
<ul>
<li>
<div>title1</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title2</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title3</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title4</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title5</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title6</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title7</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
<li>
<div>title8</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</li>
</ul>
The only assumption made here is that list's height is fixed.
Please help me. Thanks.Here is my html code:
<img id="method_pagination" src="http://www.image-maps.com/uploaded_files/9201309060150066_approach-retina-slider-clear2.png" usemap="#method_pagination" border="0" width="832" height="250" alt="" />
<map id="_method_pagination" name="method_pagination">
<area shape="poly" coords="0,9,113,40,114,201,0,232," href="#" alt="explore" title="explore" class="explore" data-slide-index="0"/>
</map>
<ul class="slides">
<li>
<strong>Simplify</strong>
<p>
<!--content-->
</p>
</li>
</ul>
Jquery Code:
$('.slides').bxSlider({
pagerCustom: '#_method_pagination'
});
You have to change the JS-Code.
Open the bxslider.js and search for this line:
slider.pagerEl.delegate('a', 'click', clickPagerBind);
and change it to this:
slider.pagerEl.delegate('area', 'click', clickPagerBind);
This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
I added some images and only the last two won't show up...maybe because it was naturally a smaller size?? I don't know...maybe someone here can help me....
Here is the part where i added them in my code
<div id="gallery">
<ul>
<li> <img src="images/studs/boss/thumbnails/boss0.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss0.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss1.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss1.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss2.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss2.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss3.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss3.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss4.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss4.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss5.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss5.jpg" class="pic" /> </li>
</ul>
</div>
the same thing you see online is the same thing I see when I access my site with local disk (my laptop where everything is stored)
i checked with chromes developer tools and I am getting "failed to load resource.." from the local disk.......like I am testing it on my computer before uploading...thats what I mean by local disk...if that is the right way to say it
this is my folder to show file structure...
The images don't exist:
http://www.saucysbulldogs.com/images/studs/boss/thumbnails/boss4.jpg
Going directly to the image will give you a 404.
The images images/studs/boss/thumbnails/boss4.jpg and boss5.jpg were not uploaded, my browser can't access them...