javascript - Clickable image in a lightbox on page loading -

-

i'm new on web developing.

i need sample code displays clickable image in lightbox on page loading close button. also, if there's way, need show on desktop browsers (avoiding mobile), , display 5x per day per user ip.

can help?

thanks.

all together, 1 file.

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>     <style>         div{position:relative;box-sizing:border-box;}         #overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;}         #lb{position:fixed;top:30px;left:20%;width:300px;height:300px;z-index:2;}           #lb_hdr{height:30px;width:100%;overflow:hidden;background:#333;color:white;}             #lb_hdr_title{float:left;height:100%;width:90%;padding:5px;}             #lb_hdr_close{float:left;height:100%;width:10%;}               .lb_close{padding:5px;background:dodgerblue;color:white;text-align:center;cursor:pointer;}           #lb_body{height:250px;width:100%;}             #lb_body_top{height:200px;width:100%;}             #lb_body_bot{height:50px;width:100%;background:white;}               #lb_bot_btn{position:absolute;right:20px;height:50px;width:80px;}                 button{width:100%;height:30px;background:dodgerblue;color:white;}     </style>     <script>         $(function(){             $('.lb_close').click(function(){               $('#overlay, #lb').fadeout();             });              $('#lb_body_top img').click(function(){               alert('you clicked picture');             });         });//end document.ready     </script> </head> <body> <div id="overlay"></div> <div id="lb">   <div id="lb_hdr">     <div id="lb_hdr_title">here title</div>     <div id="lb_hdr_close"><div class="lb_close">x</div></div>   </div><!-- #lb_hdr -->   <div id="lb_body">     <div id="lb_body_top">       <img src="http://placeimg.com/300/200/animals">     </div><!-- _lb_body_top -->     <div id="lb_body_bot">       <div id="lb_bot_btn">         <button class="lb_close">close</button>       </div><!-- #lb_bot_btn -->     </div><!-- #lb_body_bot -->   </div><!-- #lb_body --> </div><!-- #lb -->  <div id="wrap"> 3 thousand year old wisdom literature<br><br> 1 happy man level-headed son; sad mother of rebel.  2 ill-gotten gain brings no lasting happiness; right living does.  4 lazy men poor; hard workers rich.  5 wise youth makes hay while sun shines, shame see lad sleeps away hour of opportunity.  6 man covered blessings head foot, evil man inwardly curses luck.  7 have happy memories of men gone reward, names of wicked men stink after them.  8 wise man glad instructed, self-sufficient fool falls flat on face.  9 man has firm footing, crook slip , fall.  11 there living truth in man says, mouth of evil man filled curses.  12 hatred stirs old quarrels, love overlooks insults.  13 men common sense admired counselors; without beaten servants.  14 wise man holds tongue. fool blurts out knows; leads sorrow , trouble.  15 rich man’s wealth strength. poor man’s poverty curse.  17 willing corrected on pathway life. refusing has lost chance.  18 hide hatred liar; slander fool.  19 don’t talk much. keep putting foot in mouth. sensible , turn off flow!  20 when man speaks, worth listening to, words of fools dime dozen.  21 godly man gives advice, rebel destroyed lack of common sense.  23 fool’s fun being bad; wise man’s fun being wise!  24 wicked man’s fears come true , man’s hopes.  25 disaster strikes cyclone , wicked whirled away. man has strong anchor.  26 lazy fellow pain employers—like smoke in eyes or vinegar sets teeth on edge. </div><!-- #wrap -->  </body> </html>


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more