X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

무료 프리미엄 액세스

프리미엄 허브 기사, 프로젝트 파일 및 각 튜토리얼 비디오의 첫 번째 10 %의 우리의 전체 라이브러리를 액세스 온라인 자습서 도서관 .

지금 무료 계정을 만드십시오!

드림위버에서 jQuery 이미지 갤러리 라이트 박스 만들기
Google 번역에 의해 번역

당신이 그것이 라이트 박스라는 것을 몰랐을 수도 있지만 아마도 웹에서 여행하는 동안 직장에서 라이트 박스 효과를 봤어요. 기본적으로, 이미지 갤러리에서 썸네일에 방문자를 클릭하고, 더 큰 버전은 뒤에있는 페이지의 콘텐츠를 dimming, 페이지의 상단에 나타납니다. 이것은 널리 사용되는 효과는 jQuery를 사용하게하고 원래 리안 드로 비에 Pinho에 의해 작성되었습니다. 실제 라이트 박스 효과는 우리가 페이지에 설정된 하이퍼 링크에 의해 트리거됩니다. 그들은 매우 매끄러운하고 있으며,이 튜토리얼에서, 당신은 한 빌드하는 방법에 대한 자세한 내용은거야 ​​드림위버를 !


1 단계

첫째, 확인이 튜토리얼에 대한 프로젝트 파일을 다운로드합니다. 파일을 압축 해제하고 바탕 화면처럼 기억하는 위치에 프로젝트 파일을 저장합니다. 프로젝트 파일 폴더 안에 당신은 2 개 폴더, "자산"과 "영상"을 확인할 수 있습니다. 그들은 우리가 필요한 모든 구성 요소가 포함되어 있습니다.


2 단계

이제 가서 실행 드림위버를 하고 사이트를 선택


3 단계

다음, 새로운 빈 파일을 만들려면 코드보기로 플립; 다음 붙여넣기를

이 코드는 외부 자바 스크립트와 페이지뿐만 아니라, 몇 가지 추가 기능이 필요합니다되는 CSS 파일에 대한 링크가 포함되어 있습니다. 당신은 위의 사이트로 정의된 폴더로 파일을 저장해야합니다.


4 단계

이제 우리는 우리의 축소판을 기다 리죠 프레임 워크는 페이지의 구조에 대한 준비가되었습니다. 어서 붙여넣기

보시다시피, 바깥쪽 "lightboxgallery"는있다


5 단계

지금 우리는 우리의 축소판을해야합니다. 최초의 축소판으로 커서를 버려라


6 단계

대신에 우리의 작은 이미지로, 지금은 모든걸 함께 넥타이 라이트 박스 스크립트 발생을하는 시간이야. 앞에서 설명했듯이, 우리의 조명에 대한 스크립트는 하이퍼 링크와 실행 될 것입니다, 그래서 우리가 가서 링크를 설정 각 이미지의 큰 버전에 대한 다음의 결과를 테스트합니다.

보기 디자인, 그래픽 최초의 축소판을 선택 뒤집어; 다음 속성 검사기에 (링크 필드 옆에있는 폴더 아이콘) '파일에 대해 찾아보기'를 클릭하십시오. "이미지"폴더에있는 해당 전체 크기의 이미지로 이동합니다. 이 경우 "fullsize1.jpg." 자신의 전체 크기의 대응 각을 연결, 각각의 작은 이미지에 대해이 단계를 반복합니다.


7 단계

우리는 결국 물건을 밖으로 시험 준비! 파일을 저장한 다음 파일을 선택합니다

다음을 확인하십시오

이미지 갤러리 라이트 박스 프로젝트 파일 만들기

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

Sep 15, 2011
Hi there,

I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
Sep 15, 2011
Rounik
Hi,

They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files".

Just click on these to begin downloading the files.

Hope this helps
Rounik
Sep 15, 2011
Thanks for the previous reply.

I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
Sep 15, 2011
Thanks for the reply.

I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???

May 13, 2012
Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
Sep 16, 2012
wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
Jan 12, 2013
azex
hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
Jan 13, 2013
Ian
Thanks Geoff,

That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!!

The code works perfectly well.

I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text?

Cheers,

Ian
Feb 25, 2013
Emily
Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link