افکت زوم اتوماتیک تصاویر

[soroush.r70]

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

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

[sinoser]

کدس سادس ولی فک کنم توی این سایت دیدم پلاگینش رو
بگرد اگر ندیدی بگو!
http://www.htmldrive.net/

[soroush.r70]

من چیزی پیدا نکردم

[sinoser]

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

[soroush.r70]

خیلی خیلی لطف می کنی ممنونم خیلی بهش احتیاج داشتم

مثلا 10 عکس 150 در 150 کنار هم باشن از عکس اول اتوماتیک شروع بشه به زوم شدن به 300 در 300 زوم که شد دوباره برگرده به 150 در 150 بعد بره عکس دومی به همین ترتیب تا دهمی بعد دوباره از اول به همین ترتیب

[sinoser]

خیلی خیلی لطف می کنی ممنونم خیلی بهش احتیاج داشتم

مثلا 10 عکس 150 در 150 کنار هم باشن از عکس اول اتوماتیک شروع بشه به زوم شدن به 300 در 300 زوم که شد دوباره برگرده به 150 در 150 بعد بره عکس دومی به همین ترتیب تا دهمی بعد دوباره از اول به همین ترتیب

مهندس جواب سوال دومم رو ندادی !!
باشه برم افطار (بفرما ) بعد میام می نویسم می ذارم !

[sinoser]

بیا داداش ! فک کنم کارتو راه بندازه! نیم ساعته نوشتمش یعنی کلی نویسی کردم اصول مهندسی نرم رو تا شد رعایت کردم !:لبخند: بشین یکم ور برو اون جور که می خوایش بکن!:متفکر:
ببینیش می فهمی چی نوشم !

<script>
$(document).ready(function(e) {
var index = 0;
var time = 500;
nextImg();
function nextImg(){
$('#imgDivBox img').eq(index)
.css('position','absolute')
.animate({width:'+=150',height:'+=150',marginTop:'-=75',marginLeft:'-=75'},time)
.animate({width:'-=150',height:'-=150',marginTop:'+=75',marginLeft:'+=75'},time,fun ction(){
$(this).css('position','static');
index++;
if(index == 10)
index =0;
nextImg();
});
}
});
</script>


<style>
#imgDivBox{
margin:0px;
padding:0px;
width:auto;
height:150px;
overflow:hidden;
}
#imgDivBox>img{
float:left;
width:150px;
height:150px;
}
</style>



<div id="imgDivBox">
<img src="imgs/m1.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m2.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m3.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m4.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m5.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m6.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m7.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m8.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m9.jpg" width="150" height="150" alt="img 1"/>
<img src="imgs/m10.jpg" width="150" height="150" alt="img 1"/>
</div>

[soroush.r70]

آقا جواب نمی ده دلیلش چیه....؟

[sinoser]

آقا جواب نمی ده دلیلش چیه....؟
وا داداش جواب نمیده که نشد توضیح کار نکردن!
اینا رو توی یک فایل html کنار هم بذار البته بهتره style و script رو توی قسمت head و باقیش body
در ضمن باید فایل jquery رو هم به صفحت زمیمه کنی ادرس انلاینش اینه :
http://code.jquery.com/jquery-1.10.2.js

بعدشم ادرس عکساتو به جای ادرس عکس ها بذار
سعی می کنم خودم یک صفحه دمو بزنم بت نشون بدم
ولی بهتر توضیح بده !!

[sinoser]

بیا داداش ببین درس کار می کنه!
http://parsmooj.com/imager
البته یه باگ هم داره متوجش شدم! که واسه حلش باید یک clone از نسخه بگیری تا جای عنصر باقی بمونه

[soroush.r70]

آقا خیلی ممنونم

یه سوال دیگه می شه کاریش کرد که محدود به 10 تا نباشه مثلا 5 بود یا 24 هم این عمل انجام بشه و محدود به تعداد خاصی نباشه

[sinoser]

آقا خیلی ممنونم

یه سوال دیگه می شه کاریش کرد که محدود به 10 تا نباشه مثلا 5 بود یا 24 هم این عمل انجام بشه و محدود به تعداد خاصی نباشه
اره داداش کاری نداره
فردا پلاگین کامل و بدون باگشو واست می نویسم راحت بشه استفادش و تنظیماتشم ساده بشه فعلا کمی خستم تمرکز ندارم.
تا فردا:لبخندساده:

[sinoser]

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


<ul id="imgDivBox">
<li><img src="imgs/m1.jpg" alt="img 1"/></li>
<li><img src="imgs/m2.jpg" alt="img 2"/></li>
<li><img src="imgs/m3.jpg" alt="img 3"/></li>
<li><img src="imgs/m4.jpg" alt="img 4"/></li>
<li><img src="imgs/m5.jpg" alt="img 5"/></li>
<li><img src="imgs/m6.jpg" alt="img 6"/></li>
<li><img src="imgs/m7.jpg" alt="img 7"/></li>
<li><img src="imgs/m8.jpg" alt="img 8"/></li>
<li><img src="imgs/m9.jpg" alt="img 9"/></li>
<li><img src="imgs/m10.jpg" alt="img 10"/></li>
</ul>



مرحله بعد ضمیمه کردن کد پلاگین زیر هست که ضمیمش کنی راحت تری

/*
Made by sinoser (MEA)
sinoser@yahoo.com
----------------------
this plugin is for auto zoom and repeat
this have 3 Parameter obligatory and have 1 Parameter VOLUNTARY of object type
this object Parameter have 3 trait
index = number of start element | start of zero (0)
time = each part speed animate | number (ms) or string ('slow','fast')
paddingLeft = the css ADJECTIVE (padding-left) by padding-left the image element
*/
(function($){
$.fn.sinoserImgZoomer = function(LD,HD,n,option){
option = $.extend({
index:0,
time:'slow',
paddingLeft:5
},option || {})

var zoom = HD - LD;
var temp = zoom/2;
var $li = $(this).find('li');

$(this)
.css({'height':LD,'overflow':'hidden'})
.find('li')
.css({'display':'block','padding-left':option.paddingLeft,'float':'left','list-style':'none','margin':'0','width':LD,'height':LD} )
.find('img')
.css({'width':'100%','height':'100%'});

for(i=0;i<10;i++){
$li.eq(i).css('left',(option.paddingLeft+LD)*i);
}

nextImg();
function nextImg()
{

$li.eq(option.index).after($li.eq(option.index).cl one())
$li.eq(option.index)
.css('position','absolute')
.animate({width:'+='+zoom,height:'+='+zoom,marginT op:'-='+temp,marginLeft:'-='+temp},option.time)
.animate({width:'-='+zoom,height:'-='+zoom,marginTop:'+='+temp,marginLeft:'+='+temp}, option.time,function()
{
$li.eq(option.index).css('position','static').next ().remove();
option.index++;
if(option.index == n)
option.index =0;
nextImg();
});
}
return this;
}
}(jQuery))


خب حالا استفاده از پلاگین و تنظیمات و توضیحات استفاده:
این پلاگین 4 پارامتر داره و باید به سکلتور که به ul لیست اشاره می کنه متصل بشه

$('ul').sinoserImgZoomer(LD,HD,N,{index:0,time:'sl ow',paddingLeft:5});


مثال :
LD - اندازه کوچک عکس ها = 150 پیکسل
HD - اندازه بزرگ عکس ها = 300 پیکسل
N - تعداد عکس ها = 10
شی :(در بالا مقادیر پیش فرض درج شده - اختیاری)

شروع از عنصر = 6 (شروع از صفر - 5)


زمان هر مرحله = 600 ms


فاصله از چپ عناصر = 10پیکسل



$('ul#imgDivBox').sinoserImgZoomer(150,300,10,{ind ex:5,time:600,paddingLeft:10});


نکته : با css انداره عرض ul رو تعیین کنید (من خارج از پلاگین width:auto گرفتم تا همه تعداد رو جواب بده)
موفق باشی

[soroush.r70]

متاسفانه بازم جواب نداد

[sinoser]

متاسفانه بازم جواب نداد
وا مگه می شه !!
یکم روش کار کردم ورژن 1.1 دادم :لبخند:
بذارم رو سایت با دمو می ذارم

[sinoser]

خب اینم نسخه نهایی پلاگین زوم اتوماتیک تصاویر با قابلیت تعیین جهت حرکت و بزرگ شده به اندازه دلخواه
این ورژن به دلیل استفاده از توابع ease تعریف شده در jquery UI نیاز به ضمیمه ان است.
دمو : http://parsmooj.com/sinoserImgZoomer
پیشنهاد می کنم دانلود کنید چون ممکنه برش دارم از این ادرس
ادرس پلاگین : http://parsmooj.com/sinoserImgZoomer/sinoserImgZoomer.js
توضیحات :
دارای 4 پارامتر (3تا اجباری 1 شی داری 5 ویژگی اختیاری)
LD - اندازه کوچک عکس ها
HD - اندازه بزرگ عکس ها
n - تعداد عکس ها

شی :( اختیاری)
index : از نوع عدد - شمار اندیس عنصر 0 تا n-1
پیش فرض : به مقدار side بستگی دارد . اگر ltr باشد 0 در غیر این صورت n-1

speed : از توع رشته یا عدد - سرعت هر مرحله که می تواند عدد بر حسب ms یا رشته های 'slow' یا 'fast'
پیش فرض : 'slow'

paddingLeft : از نوع عدد است - فاصله عکس ها از سمت چپ هم
پیش فرض : 5 پیکسل

side : از نوع رشته - جهت حرکت را مشخص می کند که 2 مقدار 'ltr' و 'rtl' است
پیش فرض :'ltr'

delay:از نوع عدد است - زمانی که تصویر ثابت و نمایش داده میشود
پیش فرض :200 ms


$('ul').sinoserImgZoomer(LD,HD,N,{/*options*/});

[soroush.r70]

آقا خیلی خیلی ممنون

با عرض پوزش یه سوال دیگه این چیزی که شما درست کردی و خیلی ازتون ممنونم امکانش هست که تعداد ما مشخص نکنیم مثلا به جای n ندیم چون ممکنه مدیریت بیاد چندین عکس بذاره و نمی تونه بیاد هی شماره n رو تغییر بده و تعداد عکسا رو مشخص کنه چنین چیزی امکانش هست درست بشه

[sinoser]

این jQ هر کاری می کنه جز غذا پختن!
بیا به جای n اینو بذار

$('ul#imgDivBox li img').length

فقط بت بگم من اصلا اینو توصیه نمی کنم چون ممکنه طرف 20 تا عکس بذاره و اندازه کوچیکشم 300 بذاره
حالا بیا و درستش کن کل تم به هم میریزه
اگه طرف ناشی نیست خوبه!!

[soroush.r70]

والا من از jquery چیزی زیادی نمی دونم کارم php برای همین با php براش محدودیت می ذارم سقف 10 که از 10 مثلا بیشتر نشه

[soroush.r70]

این jQ هر کاری می کنه جز غذا پختن!
بیا به جای n اینو بذار

$('ul#imgDivBox li img').length

فقط بت بگم من اصلا اینو توصیه نمی کنم چون ممکنه طرف 20 تا عکس بذاره و اندازه کوچیکشم 300 بذاره
حالا بیا و درستش کن کل تم به هم میریزه
اگه طرف ناشی نیست خوبه!!


جای n گذاشتم خراب کردم رفت می تونی بگی دقیقا کجا باید بذارم ممنون :لبخندساده:

[soroush.r70]

هیچی درست کردم یک اشتباه لپی بود:لبخندساده:

[soroush.r70]

sinoser جان یه افکت زدی توپ ما رو درگیر خودت کردی می شه کاری کرد این افکتی که زدی هر عکس که زوم شد متن مربوط بهش از title که روی img هست خونده بشه و در روی یه بلاک ثابت نمایش بده

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

دیگه اینو لطف کنی درست کنی فکر کنم بشه ورژن 2 :لبخندساده:

[sinoser]

sinoser جان یه افکت زدی توپ ما رو درگیر خودت کردی می شه کاری کرد این افکتی که زدی هر عکس که زوم شد متن مربوط بهش از title که روی img هست خونده بشه و در روی یه بلاک ثابت نمایش بده

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

دیگه اینو لطف کنی درست کنی فکر کنم بشه ورژن 2 :لبخندساده:

از دست تو ! چرا که نه خب میشه
شایدم یکم پیشرفته ترش کردم اما می ترسم پیچیدگیش خیلی زیاد بشه و استفادش سخت
ولی حله اینم درس می کنم
فقط من 2- 3 روز میرم سفر نت ندارم قربون زیر ساخت اینترنتن بشم سرعت اپراتور های موبایلو در حد لاک پشت مجاز کرده
رایتمل توی منطقه ما جواب نمیده!
منتظر باش به زودی ورژن 1.5 sinoserImgZomer میاد:لبخند:

[soroush.r70]

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

[soroush.r70]

آقا یه مشکلی تو زوم شدن افکتی که زدی وجود داره اونم اینه که وقتی افکت عکس رو زوم می کنه همون تصویر پشتش می مونه که اگه تصویر png باشه خیلی ناجور می شه و یه طوریه که نمی شه عکس زوم شده را با css تنظیم کرد
ممنون می شم این مشکل یه طوری حل کنی چون خودم خیلی باهاش کلنجار رفتم نشد مرسی

[sinoser]

آقا یه مشکلی تو زوم شدن افکتی که زدی وجود داره اونم اینه که وقتی افکت عکس رو زوم می کنه همون تصویر پشتش می مونه که اگه تصویر png باشه خیلی ناجور می شه و یه طوریه که نمی شه عکس زوم شده را با css تنظیم کرد
ممنون می شم این مشکل یه طوری حل کنی چون خودم خیلی باهاش کلنجار رفتم نشد مرسی

اره خب شد گفتی!! باشه این مشکلم حل می کنم!! فقط چون فعلا سفرم نمی تونم تمرکز کنم!!
ولی چند روز دیگه با رفع همه مشکلات میام!!
سایت اختصاصی هم زدم با ادرس sinoser.ir که کلا پلاگینا رو تو اون بذارم همه خیالمون راحت باشه!!

[sinoser]

بالاخره تموم شد !!!
خب چون توی سایت توضیح کامل دادم واسه این که برادر google با ما قهر نکنه تکرار نمی ذارم!!
اینم ادرس صفحه :
http://sinoser.ir/plugins/sinoserZoomImgList