ფრიად საინტერესო -> თბილისის ფორუმი

Welcome Guest ( ავტორიზაცია | რეგისტრაცია )

ვალიდაციის წერილის ხელახალი გაგზავნა

წესები · დახმარება · ძებნა · წევრები · კალენდარი · რჩეულები · ჩატი

თბილისის ფორუმი -> ტექნიკური კონფერენცია -> WWW -> ვებსკრიპტების გარჩევა

გამოხმაურება · ახალი თემა · ახალი გამოკითხვა

ფრიად საინტერესო, მჭირდება და ვერც უცხოურზე მივაგენი

მივიღოთ შეტყობინება ამ თემის განახლების შესახებ · გაუგზავნეთ ეს გვერდი სხვას · ამოსაბეჭდი ვერსია | თემის რჩეულებში დამატება/წაშლა

C17H19NO3 __ __ ჯგუფი: Registered
C17H19NO3 __ __ ჯგუფი: Registered წერილები: 518 წევრი No.: 225716 რეგისტრ.: 6-November 16	#49247977 · 11 Nov 2016, 22:25 · · პროფილი · პირადი მიმოწერა · ჩატი გამარჯობა მეგობრებო ერთი ფრიად საინტერესო კითხვა მაქვს როდესაც საიტზე დევს რაღაც 300x300 სურათი.. კლიკი ადიდებს სურათს 600x600 ზე.. ან უბრალოდ დევს რა და მაუსის მეშვეობით დესკტოპზე რომ გადაგვაქვს ან გადმოწერის დროს ? სურათის რეალური დასახელება რომ შეიცვალოს ... ? ჩემი აზრი ისაა რომ საიტი ცნობდეს ისე როგორც არის მაგალითად PIC01.jpg და ამის შემდეგ კოდში იყოს რამე სადაც ყველა სურათი company-image ით იქნება გუგლში ვერ ვეძებ თან ისე რომ მიპასუხოს +++ და კიდევ აქ იქნებ ამიხსნათ როგორ გავაკეთო რამდენიმე სურათზე http://www.w3schools.com/howto/howto_css_modal_images.asp +++ ეს კი დავწერე Web პროგრამირებაში მაგრამ ვერ მიპასუხეს : (
	· ციტირება · ^

koshogio I know that I know nothing ჯგუფი: Members
koshogio I know that I know nothing ჯგუფი: Members წერილები: 16069 წევრი No.: 85852 რეგისტრ.: 3-March 09	#49249050 · 12 Nov 2016, 00:31 · · პროფილი · პირადი მიმოწერა · ჩატი C17H19NO3 ეს გინდა? http://codepen.io/anon/pen/woMVqG მაუსის მიტანისას რეალურ ზომას იღებს. -------------------- ნუ აწვალებთ კომპს
	· ციტირება · ^

C17H19NO3 __ __ ჯგუფი: Registered
C17H19NO3 __ __ ჯგუფი: Registered წერილები: 518 წევრი No.: 225716 რეგისტრ.: 6-November 16	#49252308 · 12 Nov 2016, 16:16 · · პროფილი · პირადი მიმოწერა · ჩატი koshogio ესეც კარგია .. ბოლო ბოლო ამას გავაკეთებდი მაგრამ იმ მოდალში ყველაფერს ვაკეთებ უბრალოდ სხვა სურათზე ვერ ვადებ და მაგას რომ გადახედო შეიძლება მიხვდე კიდეც როგორ უნდა რამდენიმე სურათზე : \| ვითომ კოდში იდები შევცვალე მაგრამ არც იმან უშველა რაღაც JS ამბავია რა
	· ციტირება · ^

koshogio
I know that I know nothing
ჯგუფი: Members

koshogio
I know that I know nothing

ჯგუფი: Members
წერილები: 16069
წევრი No.: 85852
რეგისტრ.: 3-March 09

#49254027 · 12 Nov 2016, 20:40 · · პროფილი · პირადი მიმოწერა · ჩატი

C17H19NO3

QUOTE

კოდში იდები შევცვალე

თუ ბევრ სურათზე ერთიდაიგივე ეფექტი გინდა, მაშინ CSS თვისება კლასით უნდა მიანიჭო.

QUOTE

რაღაც JS ამბავია რა

თუ სხვისი დაწერილი კოდია, სრულიად შესაძლებელია ჯავასკრიპტით იყოს გაკეთებული.

ხოლო თუ w3schools-ის მაგალითის მიხედვით გინდა გაკეთება, იქ მოდალური ფანჯრისთვისაა და ნაგულისხმევია ერთ სურათზე, რადგან სურათს მხოლოდ იდენტიფიკატორით პოულობს var img = document.getElementById('myImg');
გაცილებით დიდი შესაძლებლობა აქვს ჯავასკრიპტის JQuery ბიბლიოთეკას. http://www.w3schools.com/jquery/default.asp

· ციტირება · ^

C17H19NO3
__ __
ჯგუფი: Registered

C17H19NO3
__ __

ჯგუფი: Registered
წერილები: 518
წევრი No.: 225716
რეგისტრ.: 6-November 16

#49255304 · 12 Nov 2016, 23:07 · · პროფილი · პირადი მიმოწერა · ჩატი

koshogio
კი აქვს JS ეხლა სათითაოდ ჩავაგდებ მაშინ კოდში .. ზემოთ ლინკი რომ დავდე წერია იქ

ეს HTML

CODE

<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">


<div id="myModal" class="modal">


<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>


<img class="modal-content" id="img01">


<div id="caption"></div>
</div>

CSS

CODE

/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

CODE

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

· ციტირება · ^

1 მომხმარებელი ათვალიერებს ამ თემას (1 სტუმარი და 0 უჩინარი წევრი)

0 წევრი:

« აქეთ | ვებსკრიპტების გარჩევა | იქით »

გამოხმაურება · ახალი თემა · ახალი გამოკითხვა

ფორუმის სერვერების განთავსებას და ინტერნეტთან კავშირს უზრუნველყოფს: CLOUD9

[ Script Execution time: 0.0343 ] [ 12 queries used ] [ GZIP Disabled ]