Gyors helpre lenne szükségem jQuery-ben!?
Hahó! :) A neten, egy tutorial-on találtam az alábbi slideshow forráskódot, és szeretném felhasználni a weboldalamhoz. Annyi a bajom, hogy az eredeti kódban az img tag TITLE attribútumát írja ki az aláírásban a script. Tapasztaltam, hogy a title tag-be nem lehet formázni, úgyhogy szeretném azt elérni, hogy esetleg egy php include, vagy hasonló megoldással egy fájlból írja ki a tartalmat.. :) Remélem sikerül megérteni..! :D
A kód:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="admin/js/jquery.js"></script>
<script type="text/javascript" src="admin/js/carousel.js"></script>
<link rel="stylesheet" href="admin/css/slider.css"/>
<script type="text/javascript">
$(document).ready(function() {
carousel();
});
</script>
</head>
<body>
<div id="carousel">
<div id="tabs-wrapper">
<!-- elozo es kovetkezo gombok -->
<div id="next"></div>
<div id="prev"></div>
<div id="tabs">
<div class="tab"><img src="admin/images/news-feed/img1.jpg" title="elso"/></div>
<div class="tab"><img src="admin/images/news-feed/img2.jpg" title="masodik"/></div>
<div class="tab"><img src="admin/images/news-feed/img3.jpg" title="harmadik"/></div>
</div>
<!-- float feloldasa -->
<div class="clear"></div>
<!-- title tagek kiirasa -->
<div class="title"></div>
</div>
</div>
</body>
</html>
CSS:
div.clear { clear:both }
div#carousel {
width: 610px;
background: none;
margin-top: -21px;
}
div#tabs-wrapper {
width: 610px;
height: 450px;
overflow: hidden
}
div#tabs { position: relative }
div#tabs .tab {
width: 610px;
height: 450px;
float: left
}
div#tabs-wrapper .title {
height: 20px;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
position: relative;
font-weight: italic;
top: -110px;
font-family: verdana;
font-size: 11px;
border-left: 10px solid grey;
background-color: rgba(0, 0, 0, 0.6);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
}
div#next,
div#prev {
width: 30px;
height: 30px;
background-image: url('../../admin/images/arrows/nav.png');
position: absolute;
z-index: 2;
margin-top: 200px;
cursor: pointer;
}
div#next { margin-left: 570px }
div#next:hover { background-position: -30px 0; }
div#prev {
background-position: 0 -30px;
margin-left: 10px;
}
div#prev:hover { background-position: -30px -30px }
jQuery:
function carousel() {
// sebesség
var speed = 4000;
// időzítő
var timer = setInterval("rotate()", speed);
// tabok száma
var tabs_number = $(".tab").length;
// tab szélessége
var tab_width = $(".tab").outerWidth();
// eltolás
var offset = tab_width * (-1);
// összes tab szélessége
var total_width = $("#tabs").width = tab_width * tabs_number;
// első tab
var first_tab = $(".tab:first");
// első tab képe
var first_img = $(".tab:first img");
// utolsó tab
var last_tab = $(".tab:last");
// beállítjuk a konténer szélességét
$("#tabs").css({"width" : total_width});
// bemásoljuk az utolsó elemet az első elé, arra az esetre, ha az előző gombra kattint
last_tab.insertBefore(first_tab);
// az előző lépés miatt egyel csúsztatunk balra
$("#tabs").css({"left" : offset});
// aktívra állítjuk az első tab-ot
first_tab.addClass("active");
// kiírjuk az első kép title attribútumát
$(".title").text(first_img.attr("title"));
// következő gomb
$("#next").click(function() {
// megkeressük az aktív tabot
var active_tab = $(".active");
// etávolítjuk róla a classt
active_tab.removeClass("active");
// a következő tabra tesszük a classt
active_tab.next().addClass("active");
// a left értéket csökkentjük a tab szélességével
// a parseInt elemzi a stringet és egész számmal tér vissza
// ha nem számmal kezdődik akkor NaN-al tér vissza (not a number)
var left_indent = parseInt($("#tabs").css("left")) - tab_width;
// csak akkor hajtjuk végre az animációt, ha éppen nem fut másik animáció
// a számot módosítva tudjuk befolyásolni az animáció sebességét
$("#tabs:not(:animated)").animate({"left" : left_indent},500,function () {
// az elsőt berakjuk az utolsó mögé
$("#tabs div:first").insertAfter($("#tabs div:last"));
$("#tabs").css({"left" : offset});
});
$(".title").text($(".active img").attr("title"));
});
// előző gomb
// ugyanaz a módszer, csak visszafelé
$("#prev").click(function() {
var active_tab = $(".active");
active_tab.removeClass("active");
active_tab.prev().addClass("active");
var left_indent = parseInt($("#tabs").css("left")) + tab_width;
$("#tabs:not(:animated)").animate({"left" : left_indent}, 500,function(){
$(".tab:last").insertBefore($(".tab:first"));
$("#tabs").css({"left" : offset});
});
$(".title").text($("img").attr("title"));
});
// ha fölémzgunk az egérrel, megáll
$("#tabs").hover(
function() {
// a clearInterval() metódus törli a setInterval() által beállított időzítőt
clearInterval(timer);
},
function() {
// a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
timer = setInterval("rotate()", speed);
}
);
};
// a rotate() függvény összesen annyit csinál, hogy "rákattint" a következő linkre
function rotate() {
$("#next").click();
}
tehát így néz ki.. :) az "elso" "masodik" és "harmadik" title helyet szeretném, ha egy-egy külön fájlból olvasná ki a script a cuccost. És szeretnék bele linket is tenni, mert stb.. :)
Köszönöm a segítséget! :)
válasza:A neten rengeteg jquery image slider script van, ami jobb ennél a szörnyetegnél. Javaslom használd ezt:
Elég jól testreszabható, és html is mehet a kijelzett szövegbe.
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!