WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » i need a zoom!

View previous topic View next topic Go down  Message [Page 1 of 1]

1 i need a zoom! on Sat Jul 09, 2011 8:39 pm

Mugetsu


Registered Member
Registered Member
i need http://www.webartzforum.com/Shop-bull-WebArtz-h6.htm

click zoom images you helpme Neutral

http://reborn-th.snob.tv

2 Re: i need a zoom! on Sun Jul 10, 2011 2:42 am

RockerMan


WebArtz Technician
WebArtz Technician
Search google for Lightbox Smile


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

3 Re: i need a zoom! on Tue Jul 12, 2011 3:58 pm

The Unique


Registered Member
Registered Member

4 Re: i need a zoom! on Thu Jul 14, 2011 8:06 pm

Unknown Data


Registered Member
Registered Member
You want the exactly same one, or something, that just reminded of it? (:

http://www.sjovfakta.dk

5 Re: i need a zoom! on Mon Aug 15, 2011 4:30 pm

Nera


WebArtz Technician
WebArtz Technician
http://www.lokeshdhakar.com/projects/lightbox2/

This goes to your head section
Code:
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>


CSS goes to CSS
Code:
#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 999; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(http://www.lokeshdhakar.com/projects/lightbox2/data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2//images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2//images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose {
    background: url("http://www.lokeshdhakar.com/projects/lightbox2/images/closelabel.gif") repeat scroll 0 0 transparent;
    float: right;
    height: 18px;
    outline: medium none;
    padding-bottom: 0.7em;
    width: 66px;
}   

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


I've linked the images so you don't have to.

Than you set up an image like this (assuming you want multiple images on light box)

Code:
<a href="WHAT WILL APPEAR ON TOUCH GOES HERE" rel="lightbox[roadtrip]" title="my caption"><img src="TUMB IMAGE GOES HERE"></a>


_________________

6 Re: i need a zoom! on Thu Sep 01, 2011 11:55 pm

RockerMan


WebArtz Technician
WebArtz Technician
Mugetsu, Please respond to the thread within 48 hours. Unless the thread will be considered solved.

~RockerMan


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

7 Re: i need a zoom! on Mon Sep 05, 2011 11:45 pm

RockerMan


WebArtz Technician
WebArtz Technician
Since you have not responded, I will consider this solved & lock it.


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » i need a zoom!

Permissions in this forum:
You cannot reply to topics in this forum