I want to center this material horizontally:
<a href='/big.jpg' class = 'cloud-zoom' id='zoom1'
rel="">
<img src="/small.jpg" alt='' title="Optional title display" />
</a>
Add text-align:center to your anchor. I assume your zoom1 has display:block style and its width is larger than image's width.
<a href='/big.jpg' class = 'cloud-zoom' id='zoom1' rel="" style="display:block; width:400px; border:1px solid red; text-align:center">
<img src="/small.jpg" alt='' title="Optional title display" />
</a>
altough the question is not clear on what needs to be center aligned, here is the link you can check out -
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html
Related
So I have an image map called map and I want the text to show up within my div #show_message. The image map is on the left and the text will appear on the right side. I believe the only problem that I'm facing right now is integrating the show_message div into the script below. Also how do I hide the text before it appears on click? I thought the .()hide would do it but it doesn't work. Please help!
This is my div
<style>
#show_message {
float: right;
width: 500px;
height: 750px;
position: relative;
padding:20px;
margin:20px;
background:#fff;
color:#000
},
map {
float: left;
}
</style>
This is my map
<img src="{{ 'image.jpg' | asset_url }}" alt="" usemap="#map" id="" />
<map id="map" name="map">
<area alt="" item="abc" href="#" shape="rect" coords="33,110,395,217" />
<area alt="" item="efg" href="#" shape="rect" coords="35,222,395,321" />
<div id="show_message">Click to see text.</div>
<div id="abc show_message" class="display">You clicked abc!</div>
<div id="def show_message" class="display">You clicked def!</div>
</body></html>
This is the script
<script type="text/javascript">
$('[item]').click(function() {
var item=$(this).attr('item');
$(".display").hide();
$("#"+item).show();
return false;
});
</script>
To hide the text you have to do something like this
<div id="abc show_message" class="display">You clicked abc! <input type="button" id="hide" name="hide" value="Hide" /></div>
And the function hide in your js is:
$('#hide').click(function(){
$(".display").hide();
});
I'm trying to figure out how to get the following to work:
When initially loaded, content on the right for the initial image is displayed (and should be coloured).
On hover over the images, the images will change to colour and the content for that image will appear on the right hand side.
On Click the content will stay in the right hand side and the image will stay coloured as it is the selected content.
I understand you could just make the images simply have a rollover feature using CSS for the coloured images to appear, however I am unaware how to make the image stay coloured when clicked and how to make the content in the right appear, which I assume would be possible to do using Jquery or Javascript.
What it looks like:
http://i.stack.imgur.com/73oFL.png
<ul id="testb">
<li id="companies">
<img src="images/linkedin.gif" width="120" height="95" alt="" />
<img src="images/specsavers.gif" width="100" height="95" alt="" />
<img src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li></ul>
#testb{
width:950px;
margin:0 auto;
list-style:none;
padding:0;
}
#companies{
width:440px;
float:left;
list-style:none;
padding:85px 0 45px 0;
margin:0;
height:130px;
display:block;
}
#testcont{
float:left;
width:395px;
height:170px;
padding:45px 0 45px 70px;
margin:0;
background: url(images/testglow.gif) no-repeat;
}
If you could help out it would be really appreciated.
Thanks
Even tho NewToJS is absolutely right, sometimes a little free source code might help you get started:
var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"];
var contentColors = ["#333333", "#777777", "#000000"];
$(function() {
$("#companies img").on("mouseover", function()
{
console.log($(this).data("slide"));
$("#testcont").html(contentValues[$(this).data("slide")]);
$("#testcont").css("background-color",contentColors[$(this).data("slide")]);
});
$("#companies img").on("click", function()
{
console.log($(this).data("slide"));
$("#companies img").css("background-color", "transparent")
$(this).css("background-color", contentColors[$(this).data("slide")]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="testb">
<li id="companies">
<img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" />
<img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" />
<img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li>
</ul>
i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
I have written some code in html and css to scroll horizontally across image thumbnails and have them pop up on mouse hover. The problem is that when I can scroll horizontally, then the popped up (enlarged) image on mouse hover is only visible within the div that it is contained in. I would like for it to be visible on top of everything else on the page. But since I created the scroll bar by making the property of the div overflow-x:scroll,you would have to scroll to see the enlarged image if it is larger than the div. When I don't see the overflow-x property to scroll, I can view the enlarged image on top of everything else like I want to but all the other thumbnails are also visible. Here is a code snippet to show what I've done.
HTML
<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span> <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span> <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->
CSS
#example1_car1,#example1_car2,.scroll{
position:relative;
}
#example1_car1, #example1_car2
{
width:2400px;
height:200px;
z-index:0
}
.scroll
{
width:800px;
height:210px;
overflow-x:scroll;
z-index:0;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
zindex:-1;
}
.thumb span {
position: relative;/*absolute;*/
display:none;
}
.thumb:hover, .thumb:hover span {
display:inline;
top:0; left: 0px;
/*z-index:1;*/
z-index:10;
}
Any help would be much appreciated.
To make the enlarged image appear on top of/outside of the scrollable region, it will have to actually be outside of it.
To make the enlarged image appear outside, when hovering over a thumbnail that is inside of the scrollable region, you will need to use JavaScript on top of your HTML and CSS.
Here's an example on jsfiddle, in which I haven't changed your HTML structure. Instead I used jQuery to clone the enlarged image outside of the scrollable region and append it to the #example1 div, when you hover over a thumbnail.
JavaScript portion:
$('.thumb').hover(
function(){
var thumb = $(this).children('img');
var large = $(this).find('span>img').clone();
$('#example1').append(large);
large.addClass('enlargedImg');
large.css({
'top': thumb.offset().top,
'left': thumb.offset().left
});
},
function(){
$('.enlargedImg').remove();
}
);
I used the thumb image's offset() values to position the enlarged image directly on top of it. You'll probably want to move it a bit but hopefully this is enough to get you started.
I am programming an image viewer box which overlays a thumbnail gallery page. The image viewer is set to become visible when the user clicks on a thumbnail.
Currently, when a thumb is clicked, the viewer pops into visibility and then immediately becomes invisible again. I would like to know how to invoke the viewer to full visibility and then keep it there.
I am using an external .js file.
The onclick event:
<div class="thumb_box">
<a href="" alt="gallery thumb" onclick="invokeViewer()">
<img class="thumbnail" src="../thumbs/jacob/jacob1.png" />
</a>
</div>
The JavaScript function:
function invokeViewer(){
var viewerBack = document.getElementById('imagebox_foreground');
var viewerFore = document.getElementById('imagebox_background');
var currentImage = document.getElementById('current_image');
viewerBack.style.visibility='visible';
viewerFore.style.visibility='visible';
currentImage.style.visibility='visible';
return false;
}
The Viewer Div's HTML:
<div id="imagebox_foreground" style="visibility:hidden">
<img id="current_image" style="visibility:hidden" src="imageurl.jpg" />
</div>
<div id="imagebox_background" style="visibility:hidden"></div>
The Viewer Div's CSS
#imagebox_foreground{
position:absolute;
left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:transparent;
z-index:992;
}
#imagebox_background{
position:absolute; left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:black;
border-right:solid 4px rgb(40,40,40); border-left:solid 4px rgb(40,40,40);
opacity:.85; filter:alpha(opacity=85);
z-index:991;
}
#current_image{
display:block;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}
I suspect your href is being triggered and your page is being reloaded. Add return false to your event handler to prevent the link from being triggered. invokeViewer() is already returning false, so you can just say return invokeViewer():
<a href="" alt="gallery thumb" onclick="return invokeViewer()">
Or:
<a href="" alt="gallery thumb" onclick="invokeViewer(); return false;">