مشکل در قرار دادن کد گالری عکس جاوا

این تاپیک 4 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  rashidd ،‏ 4 سال و 2 ماه پیش .

این تاپیک تاکنون 1734 بازدید داشته است .

نویسنده پست
یکشنبه ، 7 اکتبر 2012     12:16 ق.ظ #


rashidd

Subscriber
2 پست2 تاپیک

من می خوام تو سایتم کد گالری عکس با جاوا اسکریپت رو کپی کنم اما وقتی کپی می کنم قالب سایت بهم می خوره تا حدودی تونستم مشکلات رو پیدا کنم تنها مشکلم اینه که عکس توی گالری نمی مونه و از کادرش بیرون میزنه و زیر هم میاد

0  تشکر
یکشنبه ، 7 اکتبر 2012     12:00 ب.ظ #


طاها دریس

Authorplus
VIP
451 پست5 تاپیک

سلام.

خب عرض و ارتفاع عکس ها رو با دو صفت height و width تغییر بدین، و اندازه ها رو برابر با کادری که عکس ها درش قرار میگیرن بذارین

0  تشکر
یکشنبه ، 7 اکتبر 2012     2:42 ب.ظ #


rashidd

Subscriber
2 پست2 تاپیک

سایز عکس درسته فقط از کادرش جابجا شده وقتی کد اجرا میشه  و می خواد بره اسلاید بعد رو نشون بده عکسا زیر هم مییان و خراب می شه

0  تشکر
یکشنبه ، 7 اکتبر 2012     10:19 ب.ظ #


محمدسینا معراجیان

Contributor
112 پست0 تاپیک

باید کدتون رو دید حالا ولی کلا میپرسم حواستون بوده کد اسلایدرتون تداحل اسمی با کلاس ها و ایدی هاتون نداشته باشه دیگه؟

0  تشکر
دوشنبه ، 8 اکتبر 2012     4:33 ب.ظ #


rashidd

Subscriber
2 پست2 تاپیک

هیچ تداخل اسمی ندارن

یه سوال دیگه داشتم

کد زیرکد اسلاید شو است

می خوام سایز عکسو بزرگتر کنم و بزرگ هم می شه

ولی افکت کرکرهای اون بزرگ نمیشه که بخوا بره عکس بعد و افکت نصفه می مونه

برای مثال طول و عرض عکس 300*200 و من اونو 796*262 کردم اما افکت اون به اندازه 200*300 مونده و بزرگتر نمی شه

اینم کد

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<style>
* {margin:0;padding:0}
body {
background-color:#111;
padding:50px;
}
/* Slider */
#slider {
display:block;
border:4px solid #000;
  width:796px; /* slider width */
height:262px;; /* slider height */
margin:0 auto;
background:white url('images/1.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
/* For caption */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 12px tahoma;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* hide the caption with this way :) */
left:0;
z-index:44;
direction:rtl;
}
#slider img {
display:block;
margin:0 0;
  width:796px; /* slide width */
  height:262px; /* slide height */
position:absolute;
top:0;
left:0;
}
/* Navigation */
#slider-nav {
display:block;
position:absolute;
top:10px;
left:10px;
z-index:99;
}
#slider-nav a {
display:block;
float:right;
width:10px;
height:10px;
background-color:#111;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
border-radius:100%;
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
#slider-nav .active {
background-color:#2589B4;
}
/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
.jDesign_info {
color:#FFF;
text-align:right;
font-size:small;
direction:rtl;
font-family: Tahoma;
padding:6px;
margin-right: 200px;
margin-left: 200px;
border: 5px solid #006CD9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #ac987e;
-moz-box-shadow: 0px 0px 5px #ac987e;
box-shadow: 0px 0px 5px #ac987e;
}
.jDesign_info a {color: #006CD9;text-decoration: none;}
.jDesign_info a:hover {color:#fff;background:#006CD9;text-shadow:2px 1px 3px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:2px;-webkit-transition-property:background;-webkit-transition-duration:.3s;-webkit-transition-timing-function:linear, ease-in;-moz-transition:background .3s ease-in;-o-transition:background .3s ease-in;}
</style>
</head>
<body>
<figure id="slider">
<div>
<img src="images/1.jpg" alt="در اینجا متن دلخواه وارد نمایید." >
<img src="images/2.jpg" alt="در اینجا متن دلخواه وارد نمایید." >
<img src="images/3.jpg" alt="در اینجا متن دلخواه وارد نمایید." >
<img src="images/4.jpg" alt="در اینجا متن دلخواه وارد نمایید." >
</div>
<figcaption></figcaption> <!-- slideshow caption -->
<nav id="slider-nav"></nav> <!-- navigation -->
</figure>
<br/><br/><br/>
<div> برای مشاهده اسکریپت های بیشتر از سایت
: <a rel="nofollow" href="http://www.jdesign.ir" >[جی دیزاین | خدمات وب ، طراحی وب سایت]</a> بازدید نمایید.</div>
<script src="jdesign.js"></script>
<script>
/**
* By Amir anoosheh
* URL: http://jDesign.ir
*/
(function($) {
// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
var config = {
slices:10,//umber of slices
speed: 600, // slideshow speed
easing: null, // easing type
interval: 3000 // slideshow interval
};
// ==================================================================================
// Some variables...
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
autoSlide = null,
$first = $slide.first();
// Auto append navigation item based on the slides length
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a rel="nofollow" href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
// Set the slices size
var slice_w = $slider.width()/ config.slices,
slice_h = $slider.height();
// Build the slices
for (var i = 0; i < config.slices; i++) {
$('<div />').css({
'position':'absolute',
'width':slice_w,
'height':slice_h,
'left':slice_w*i,
'z-index':4,
'background-color':'transparent',
'background-repeat':'no-repeat',
'background-position':'-' + slice_w*i + 'px 0'
}).appendTo($slider);
}
// Catch the slices, and also set the different position between odd and even slices
var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
$sliceEven = $slider.find('.slice:even').css('top',0);
// Click to switch!
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index(),
text = $slide.eq(pos).attr('alt'),
bg = $slide.eq(pos).attr('src');
$slide.hide().eq(pos).trigger("load").show();
// Do the caption and slices animation here!
$caption.stop().animate({bottom:'-100px'}, config.speed/2);
$sliceOdd.each(function(i) {
$(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'bottom':0,
'opacity':1
});
});
});
$sliceEven.each(function(i) {
$(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'top':0,
'opacity':1
});
});
}).promise().done(function() {
$caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, config.interval);
return false;
}).first().addClass('active');
// Init slideshow
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);
// Navigation clicker
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
}
// Run the slideshow on page load...
$(function() {
// remove the 'loading background-image' of '#slider'
$slider.css('background-image','none');
// Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
$container.show();
$caption.show();
$nav.css('opacity',1);
// Another init slideshow
$slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');
// Then, start the interval...
autoSlide = setInterval(slideShow, config.interval);
});
})(jQuery);
</script>
</html>

2  تشکر
پست 1 تا 5 (از مجموع 5 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .