我正在为我的公共艺术作品建立一个画廊。我想知道是否有一种简单的方法来显示和隐藏 div？我只想在以下链接的第一页上看到概念文本：http ://www.gerardtonti.com/PresentTense/PresentTense.html
现在，我在一个名为“concept”的 div 中将这个概念设置为绝对定位。是否还有一种方法可以使文本与背景图像等窗口大小保持一致？我也尝试过使用 iframe 和颜色框而不是 div，但不知道如何使 iframe 也仅在第一张幻灯片上可见。无论使用 iframe 还是 div，我想知道是否可以隐藏在第一张幻灯片后面的框架上。
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Present Tense</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
*{outline:none;}
body{margin:0px; padding:0px; background:#000; font:16px/1.2 Verdana, sans-serif; padding:0 10px; color: #fff;}
h2{font-size:24px; margin:15px 0 0 0;}
#toolbar{position:fixed; z-index:3; right:10px; top:10px; padding:5px; background:url(fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:3; left:10px; top:10px; padding:10px; background:url(fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden; width:100%; height:100%;}
#bgimg{display:none; -ms-interpolation-mode: bicubic;}
#concept {position: absolute; overflow: auto; width: 1200px; height: 600px; padding: 20px; margin-top: 100px; margin-right: auto; margin-left: 350px; margin-bottom: 5px; z-index: 99; border: 0px solid #000; box-shadow: 15px 30px 40px rgba(20,20,20,20);}
#preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#thumbnails_wrapper{z-index:2; position:fixed; bottom:0; width:100%; background:url(empty.gif); /* stupid ie needs a background value to understand hover area */}
#outer_container{position:relative; padding:0; width:100%; margin:40px auto;}
#outer_container .thumbScroller{position:relative; overflow:hidden; background:url(fs_img_g_bg.png);}
#outer_container .thumbScroller,
#outer_container .thumbScroller .container,
#outer_container .thumbScroller .content{height:170px;}
#outer_container .thumbScroller .container{position:relative; left:0;}
#outer_container .thumbScroller .content{float:left;}
#outer_container .thumbScroller .content div{margin:5px; height:100%;}
#outer_container .thumbScroller img{border:2px solid #000;}
#outer_container .thumbScroller .content div a{display:block; padding:5px;}
.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(prevImgBtn.png) center center no-repeat;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body>
<div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/ConceptBackground.jpg" width="1680" height="1050" alt="Bloom" title="" id="bgimg" /></div>
<div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50" /></a></div>
<div id="concept">
<h2><center>Present Tense<br />2006</center></h2>
<p>With this mural, I really began to understand the impact public art could have on a community. This was my second mural for The Sprout Fund and it posed many challenges. There were both challenges with the surface of the wall and challenges with the community. It was completely exhausting at times but this experience is what has made me passionate about creating public art. I had no idea that a piece of public art meant to depict a community could ignite such strong emotional reactions from its residents and bring about change.</p>
<p>I was selected among a pool of artists to paint a mural at the center of the community on the corner of Bessemer Avenue and Main Street in East Pittsburgh. The community has a history of working class families with the old Westinghouse plant seated in the valley underneath the George Westinghouse Memorial Bridge. If you are familiar with Pittsburgh, you might know that the George Westinghouse Memorial Bridge connects East Pittsburgh and North Versailles along Route 30.</p>
<p>Prior to being selected, I walked the streets of East Pittsburgh, photographing subjects and interviewing the local residents for some insight into the neighborhood to complete a preliminary design. The homes were mostly older, and it seemed like a small, friendly city community with an appreciation for its industrial past. The design notes from the first community meeting placed an importance on having some aspect of industry and the bridge in the preliminary design. I took pictures of the local community children that would play in the street. One local resident noted that novelist Joseph Wambaugh (The Onion Field, The Choirboys) spent his early years in East Pittsburgh prior to moving to California. I thought that it might be interesting to get him involved and have him write something inspiring about his childhood neighborhood. The idea of using text as a graphic element somewhere in the mural also appealed to me. With my research and first preliminary design completed I presented my concept in to the community board.</p>
<p>The four children were photographed in the neighborhood and stare at the viewer behind one of the bridge pylons. I wanted to show that there was a new and young future behind the neighborhoods past of industry. Joseph Wambaughs quote would be added at the top to give the design a distinct multimedia element. In front of the pylon there is a couple, painted life size, looking at the young faces of their neighborhoods future. Other subtle elements were to appear carved into the stone to the right of the couple (three lines for the rivers, shamrock for it’s once dominant irish ethnicity, etc.).</p>
<p>The community must have seen something that they liked. I was chosen to paint the mural but several community board members did not like the presented design. At first I thought it was the addition of the type. No one had attempted to include typography in a Sprout Fund mural before and it gave the design a modern look. The following meeting was a re-presentation of the original design followed by the first of the community and artist talks. I was told that several of the board members were unhappy with the large heads and felt that the faces were too bold and wanted more of the bridge and neighborhoods past to have a more prominent role in the final design. Several members also seemed to take offense to the two larger heads on the right side being African American. They were offended that they were painted larger than the two caucasian children on the left. It was not intended for any of the children to dominate the design, the children were merely photographed at different times, enabling me to paint some sooner than others.</p>
<p>I took notes from the first meeting and returned the next week with a new rough design. This rough design featured a girl reading a book underneath the George Westinghouse Bridge while looking into its past industrial landscape. For this design, the girl that I had photographed with the book was a neighbor of mine. The community board really liked this design and wanted to continue with this direction. A week later at the final community meeting I had reworked the final design with much better images but the original girl that I photographed was not available for the second time. I took pictures of a different neighborhood girl for the finished design.</p>
<p>When presenting the final design at the last community meeting before starting the project, several community members noted that the girl in this design was now African American. I explained that it should not matter what skin color the girl is, and that their community was ethnically diverse. The model I happened to have readily available just happened to be African American for the final design. It was clear that one gentleman in particular was not happy with the skin color of the girl. After much disagreement and discussion, it was decided that the skin or the girl should be a mixed and non-discernable tone. There were many debates and after reluctant final approval, I began the process of transferring the design to the wall.</p>
<p>The wall was 100 wide by 22 feet high with the majority of the surface being a rough sand stone and the remaining surface a glossy coated brick. Painting on two very different surfaces was extremely challenging and involved different treatment and preparation in order to make the design contiguous. The whole wall soaked up 27 gallons of primer. There were also electrical wires that had to be insulated in order to get close enough to parts of the wall to paint them, as well as a plethora of bees nests in the gutters that had to be exterminated.</p>
<p>Even though the wall itself posed many challenges for an artist, it was witnessing the display of closed mindedness of some of the community members that posed to be the biggest obstacle. I painted one Saturday during the East Pittsburgh community day. Families showed up in the parking lot and community play area across the street to picnic, play music, and engage in activities. I noticed that none of the African American children or parents attended. The following week there was a similar event that I was not made aware of. People gathered in the parking lot to again picnic and play music.</p>
<p>I was confused and thought maybe this was something that the community did every weekend in the summer. I approached a local woman later that evening telling her that I thought the community day was held last weekend. She replied saying that this was different and that they have their own day, meaning the African Americans in the community. I didn’t know that segregated community days still existed. I thought I had stepped back in time fifty years and couldn’t help but think what this was teaching the children of the neighborhood.</p>
<p>I would continued to receive comments by one man who would pass through the neighborhood in his truck displaying a confederate flag always telling me that I was painting “one ugly picture.” I climbed down the scaffolding after this happened the second time and proceeded to chase his truck with no luck. I’ve never known the identity of that man. It was infuriating and sad. I just wanted to finish the mural and move on. It was extremely frustrating to bond with all of the neighborhood children but be repulsed by the adult behavior. They were ignoring part of their neighborhood community. I started to slightly alter the final design as I was painting it. I rendered the images tied to the past with dull grey color while using saturated colors for the foreground images of the girl and flowers. I wanted to subtly give a message that people are what build and make a community, not its objects and relics from the distant past. They were honoring so much of the past while ignoring the things that were vibrant and in need of nurture in front of them.</p>
<p>The community had the dedication for the mural and a few weeks later I was taking pictures of the finished product when a car pulled into the lot across the street a few spaces away from where I was parked. I finished taking the pictures and walked to my car. I noticed that it was the board member who had given me all of the trouble in the world over the girls skin tone. He was sitting there in his car looking at the mural. I was dreading what he had to say now that it was finished. I walked over to say hello. He was sitting there with tears in his eyes. He thanked me and apologized for his words and actions and shook my hand, telling me that he was moved by the final mural and thought it was beautiful. I thanked him and I got into my car, leaving him and the neighborhood behind, feeling a sense of accomplishment.</p>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<div class="content">
<div><a href="images/ConceptBackground.jpg"><img src="images/ConceptBackground_Thumb.jpg" title="PreliminaryDesign 1" alt="PreliminaryDesign 1" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PreliminaryDesign.jpg"><img src="images/PreliminaryDesign_Thumb.jpg" title="PreliminaryDesign 1" alt="PreliminaryDesign 1" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense1.jpg"><img src="images/PresentTense1_Thumb.jpg" title="Present Tense 1" alt="Present Tense 1" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense2.jpg"><img src="images/PresentTense2_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense3.jpg"><img src="images/PresentTense3_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense4.jpg"><img src="images/PresentTense4_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense5.jpg"><img src="images/PresentTense5_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense1.jpg"><img src="images/PresentTense1_Thumb.jpg" title="Present Tense 1" alt="Present Tense 1" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense2.jpg"><img src="images/PresentTense2_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense3.jpg"><img src="images/PresentTense3_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense4.jpg"><img src="images/PresentTense4_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/PresentTense5.jpg"><img src="images/PresentTense5_Thumb.jpg" title="Present Tense" alt="Present Tense" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
</div>
<script>
//config
//set default images view mode
$defaultViewMode="full"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction)
$scrollEasing=600; //scroll easing amount (0 for no easing)
$scrollEasingType="easeOutCirc"; //scroll easing type
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")
//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");
$(window).load(function() {
$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
if($defaultViewMode=="full"){
$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
ShowHideNextPrev($nextPrevBtnsInitState);
//thumbnail scroller
$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
sliderLeft=$thumbScroller_container.position().left;
sliderWidth=$outer_container.width();
$thumbScroller.css("width",sliderWidth);
var totalContent=0;
fadeSpeed=200;
var $the_outer_container=document.getElementById("outer_container");
var $placement=findPos($the_outer_container);
$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
});
$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - $placement[1]);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
if(mouseCoords>destX){
$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
} else if(mouseCoords<destX){
$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
$thumbnails_wrapper.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
}
);
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
}
);
//on window resize scale image and reset thumbnail scroller
$(window).resize(function() {
FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
var newWidth=$outer_container.width();
$thumbScroller.css("width",newWidth);
sliderWidth=newWidth;
$placement=findPos($the_outer_container);
});
//load 1st image
var the1stImg = new Image();
the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
the1stImg.src = $bgimg.attr("src");
$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href")) ;
$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
});
function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
$this.fadeOut("fast",function(){
$this.attr("src", "").attr("src", imgSrc); //change image source
FullScreenBackground($this,imageWidth,imageHeight); //scale background image
$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
var imageTitle=$img_title.data("imageTitle");
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$img_title.fadeOut("fast",function(){
$img_title.html(imageTitle).fadeIn();
});
} else {
$img_title.fadeOut("fast",function(){
$img_title.html($this.attr("title")).fadeIn();
});
}
});
}
//mouseover toolbar
if($toolbar.css("display")!="none"){
$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("fast", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("fast", 0.4);
}
);
//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
event.preventDefault();
var $this=$(this);
GetNextPrevImages($this);
GetImageTitle($this);
SwitchImage(this);
ShowHideNextPrev("show");
});
//next/prev images buttons
$nextImageBtn.click(function(event){
event.preventDefault();
SwitchImage($outer_container.data("nextImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
});
$prevImageBtn.click(function(event){
event.preventDefault();
SwitchImage($outer_container.data("prevImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
});
//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
if(ev.keyCode == 39) { //right arrow
SwitchImage($outer_container.data("nextImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false; // don't execute the default action (scrolling or whatever)
} else if(ev.keyCode == 37) { //left arrow
SwitchImage($outer_container.data("prevImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false; // don't execute the default action (scrolling or whatever)
}
});
}
function ShowHideNextPrev(state){
if(state=="hide"){
$nextImageBtn.fadeOut();
$prevImageBtn.fadeOut();
} else {
$nextImageBtn.fadeIn();
$prevImageBtn.fadeIn();
}
}
//get image title
function GetImageTitle(elem){
var title_attr=elem.children("img").attr("title"); //get image title attribute
$img_title.data("imageTitle", title_attr); //store image title
}
//get next/prev images
function GetNextPrevImages(curr){
var nextImage=curr.parents(".content").next().find("a").attr("href");
if(nextImage==null){ //if last image, next is first
var nextImage=$(".content").first().find("a").attr("href");
}
$outer_container.data("nextImage",nextImage);
var prevImage=curr.parents(".content").prev().find("a").attr("href");
if(prevImage==null){ //if first image, previous is last
var prevImage=$(".content").last().find("a").attr("href");
}
$outer_container.data("prevImage",prevImage);
}
//switch image
function SwitchImage(img){
$preloader.fadeIn("fast"); //show preloader
var theNewImg = new Image();
theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
theNewImg.src = img;
}
//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
return function(){
return delegateMethod.apply(contextObject, arguments);
}
}
//new image on load
function theNewImg_onload(){
$bgimg.data("newImageW",this.width).data("newImageH",this.height);
BackgroundLoad($bgimg,this.width,this.height,this.src);
}
//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
var winWidth=$(window).width();
var winHeight=$(window).height();
if($toolbar.data("imageViewMode")!="original"){ //scale
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
if ((winHeight / winWidth) < picHeight) {
$(theItem).attr("width",winWidth);
$(theItem).attr("height",picHeight*winWidth);
} else {
$(theItem).attr("height",winHeight);
$(theItem).attr("width",picWidth*winHeight);
};
} else { //normal size image mode
if ((winHeight / winWidth) > picHeight) {
$(theItem).attr("width",winWidth);
$(theItem).attr("height",picHeight*winWidth);
} else {
$(theItem).attr("height",winHeight);
$(theItem).attr("width",picWidth*winHeight);
};
}
$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
} else { //no scale
$(theItem).attr("width",imageWidth);
$(theItem).attr("height",imageHeight);
$(theItem).css("margin-left",(winWidth-imageWidth)/2);
$(theItem).css("margin-top",(winHeight-imageHeight)/2);
}
}
//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
$toolbar.data("imageViewMode", theMode);
FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
if(theMode=="full"){
$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
}
//function to find element Position
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curtop, curleft];
}
</script>
</body>
</html>
任何帮助将不胜感激。
谢谢，
格里