Geek Answers Handbook

How to hover, change, switch image using jQuery

I am working on my project and I am trying to do it

enter image description here.

I want everything to work on a click for each image (so that each image will have its own paper), it needs to freeze, and I would like to use the dim blind effect.

I read that it would be prudent to use CSS Backgrounds for this, so I can swap photos, but I can't figure it out.

I took the code to make a div that would be clickable, but I did not make the desired effect.

jQuery(document).ready(function($) {
    $('.brownbox_trigger').click(function(event) {
        //prevent deafault action (hyperlink)
        e.preventDefault();

        //Get clicked link href
        var image_href = $(this).attr("href");

            /*
            If the brownbox window HTML already exists in document,
            change the img src to mach the href of whatever link wac c

            If the brownbox window HTML doesn't exists, create it and insert
            (This will only happen the first time around)
            */
        if ($('#brownbox').length > 0) { // #brownbox exists
            //place href as img src value
            $('#content').html('<img src="' + image_href + '" />');

            //show brownbox window
            $('#brownbox').show();
        }

        else {

            //create HTML markup for brownbox window
            var brownbox = 
            '<div id="brownbox">' +
            '<p>Click to close</p>' +
            '<div id="content">' + 
            '<img src="' + image_href + '" />' +
            '</div>' +
            '</div>';

            //insert brownbox into page
            $('body').append(brownbox);
        }
            /* Act on the event */
    });

    //Click enywhere on the page to get rid of the brownbox window
    $('#brownbox').live('click', function() {
        $('#brownbox').hide();
    });
    // Our script here

});

EDIT: I want to use SlideDown () - SlideUp () from jQuery (), so I used some examples to make changes to my HTML code, but nothing happens when I click on the image.

JSFiddle example .

, div , jQuery . , , , , , , ?

, , .

+2
2

, -

HTML

    <!-- content to be placed inside <body>…</body> -->
<div class='circle-container'>
    <!--<a href='#' class='circle center'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
        <div class="content hidden">Content1</div>-->   <a href='#' class='circle deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
    <div class="content">Content1</div> <a href='#' class='circle deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
    <div class="content hidden">Content2</div>  <a href='#' class='circle deg135'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg'></a>
    <div class="content hidden">Content3</div>  <a href='#' class='circle deg180'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg'></a>
    <div class="content hidden">Content4</div>  <a href='#' class='circle deg225'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg'></a>
    <div class="content hidden">Content5</div>  <a href='#' class='circle deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
    <div class="content hidden">Content6</div>
</div>

CSS

    /**
 * Position icons into circle (SO)
 * http://stackoverflow.com/q/12813573/1397351 
 */
 .hidden {
    display:none;
}
.active {
    filter: brightness(200%);
    border-radius:50px;
    transition: all 1s;
}
.content {
    position:absolute;
    padding:10px;
    border:1px solid #dedede;
    border-radius:5px;
    background: #eeeeee;
    top:46%;
    left:41%;
}
.circle-container {
    position: relative;
    width: 24em;
    height: 24em;
    padding: 2.8em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    /*border: dashed 1px;*/
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    /* 2em = 4em/2 */
    /* half the width */
}
.circle-container img {
    display: block;
    width: 100%;
}
.deg0 {
    transform: translate(12em);
}
/* 12em = half the width of the wrapper */
 .deg45 {
    transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
    transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
    transform: translate(-12em);
}
.deg225 {
    transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
    transform: rotate(315deg) translate(12em) rotate(-315deg);
}
/* this is just for showing the angle on hover */
 .circle-container a:not(.center):before {
    position: absolute;
    width: 4em;
    color: white;
    opacity: 0;
    background: rgba(0, 0, 0, .5);
    font: 1.25em/3.45 Courier, monospace;
    letter-spacing: 2px;
    text-decoration: none;
    text-indent: -2em;
    text-shadow: 0 0 .1em deeppink;
    transition: .7s;
    /* only works in Firefox */
    /* content: attr(class)'°';*/
}
.circle-container a:hover:before {
    opacity: 1;
}
/* this is for showing the circle on which the images are placed */
 .circle-container:after {
    position: absolute;
    top: 2.8em;
    left: 2.8em;
    width: 24em;
    height: 24em;
    /*border: dashed 1px deeppink;*/
    border-radius: 50%;
    opacity: .3;
    pointer-events: none;
    content:'';
}
.circle-container:hover:after {
    opacity: 1;
}
.circle-container a:not(.center):after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 .5em .5em white;
    margin: -2px;
    background: deeppink;
    opacity: .3;
    content:'';
}
.circle-container:hover a:after {
    opacity: 1;
}
.circle-container a:hover:after {
    opacity: .3;
}

Script

$(".circle").click(function () {
    $(".content").hide(800);
    $(".circle").removeClass("active");
    $(this).addClass("active");
    $(this).next(".content").slideDown(1000);
});

+2

, :

CSS:

ul li a {
    width:134px;
    height:53px;
    display:block;
}
.iconOne {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -82px -58px;
}
.iconTwo {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -244px -58px;
}
.iconThree {
    background:url("http://www.studiopress.com/images/blog/click-here-buttons.jpg") no-repeat scroll -403px -58px;
}
a.iconOne:hover {
    background-position:-82px -123px;
}
li.active a.iconOne:hover, li.active a.iconOne {
    background-position:-82px -188px;
}
a.iconTwo:hover {
    background-position: -244px -123px;
}
li.active a.iconTwo:hover, li.active a.iconTwo {
    background-position: -244px -188px;
}
a.iconThree:hover {
    background-position:-403px -123px;
}
li.active a.iconThree:hover, li.active a.iconThree {
    background-position:-403px -188px;
}

:

<ul>
    <li>
        <a href="#" class="iconOne"></a>
    </li>
     <li>
        <a href="#" class="iconTwo"></a>
    </li>
     <li>
        <a href="#" class="iconThree"></a>
    </li>
</ul>
+1

More articles:


All Articles