Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как изменить ссылку в слайдере (https://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html)

alexvost 12.06.2012 15:22

Как изменить ссылку в слайдере
 
:agree: Здравствуйте. Парни, подскажите как изменить адрес ссылки. Там в самом боди есть ссылка, а в ней картинка, которая меняется в зависимости от вариантов вывода. Вопрос там же. Подскажите как реализовать, или хотя бы куда капать. Нужно чтоб там были адреса разных сайтов, поэтому простое перечисление типа "slash"+ImgIdx+".jpg" не подойдёт
<script type="text/javascript">
	var ImgIdx = 2;
	function PreloadImg(){
		$.ImagePreload("444_files/slash2.jpg");
		$.ImagePreload("444_files/slash3.jpg");
		$.ImagePreload("444_files/slash4.jpg");
		$.ImagePreload("444_files/slash5.jpg");
	}
	$(document).ready(function(){
		PreloadImg();
		$(".SlashEff ul li").click(function(){
				$(".Slash").ImageSwitch({Type:$(this).attr("rel"),
											NewImage:"444_files/slash"+ImgIdx+".jpg", speed: 4000
										});
			ImgIdx++;
			if(ImgIdx>5) ImgIdx = 1;
		});
	});
</script>

</head>
<body>
	<div>
				<div class="SplashFrame">
			<a href="как тут изменить ссылку в зависимости от того, какой слайдер показывается"><img src="444_files/slash1.jpg" alt="Slash" class="Slash"/> </a>
		</div>
		<div class="SlashEff">
			<ul>
				<li class="TryFadeIn" rel="FadeIn">1 вариант</li>
				<li class="TryFlyIn"  rel="FlyIn">2 вариант</li>
				<li class="TryFlyOut"  rel="FlyOut">3 вариант</li>
				<li class="TryFlipOut"  rel="FlipOut">4 вариант</li>
			</ul>
		</div>
	</div>
</body>

Deff 12.06.2012 15:37

Цитата:

Сообщение от alexvost
Здравствуйте. Парни, подскажите как изменить адрес ссылки.

Мон ссылку на дейстующую модель?(Или полный код действующего слайдера в топик) и скриншот со стрелкой на данную изменяемую ссылку

alexvost 13.06.2012 01:28

http://ruseller.com/lessons/les223/example.htm

Нужно сделать чтоб изображение было ссылкой, соответственно меняется изображение, меняется и ссылка.

НАШЁЛ! Отвечает знаток.)

Нужно добавить в скрипте
if(ImgIdx==2) $('.selector').attr('href', 'http://www.first.com/');
if(ImgIdx==3) $('.selector').attr('href', 'http://www.second.com/');
if(ImgIdx==4) $('.selector').attr('href', 'http://www.third.com/');
if(ImgIdx==5) $('.selector').attr('href', 'http://www.fourth.com/');

перед
ImgIdx++;
if(ImgIdx>5) ImgIdx = 1;
и для ссылки прописать соответствующий селектор через класс. Работает. Проверил. Спасибо за внимание, может кому поможет.

Deff 13.06.2012 02:24

alexvost,
Попробуйте поменять скриптовую часть на такую
<script type="text/javascript" src="example/jQuery.js"></script>
<script type="text/javascript" src="example/Groject.js"></script>
<script type="text/javascript">
	var ImgIdx = 2;
	var arrLnk = [
	'images/slash1.jpg','http://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html',
	'images/slash2.jpg','http://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html',
	'images/slash3.jpg','http://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html',
	'images/slash4.jpg','http://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html',
	'images/slash5.jpg','http://javascript.ru/forum/jquery/29040-kak-izmenit-ssylku-v-slajjdere.html',

	'End'] ;
	function PreloadImg(){
	        for (var i=0; i < arrLnk.length-1; i+=2){
		  $.ImagePreload("arrLnk[i]");
		}
	}
	$(document).ready(function(){
		PreloadImg();
		$(".SlashEff ul li").click(function(){
				$(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
											NewImage:"images/slash"+ImgIdx+".jpg", speed: 4000
										});
			ImgIdx++;
			if(ImgIdx>5) ImgIdx = 1;
		});		
	});

function aWrapper(){
	var a=$(".SplashFrame img");   var ImgLnk=a.attr("src");

   	        for (var i=0; i < arrLnk.length-1; i+=2){
		  if(arrLnk[i]==ImgLnk){var aLink = arrLnk[i+1]; break;}
		}
	var LnkWrap = '<a href="'+ aLink + '" target="blank_"></a>';
	a.wrap(LnkWrap);
}

$(window).load(function(){ aWrapper() });

$("div.SlashEff").find("ul li[class]").live('click',function(){
	aWrapper()
});
</script>


Ссылки в массиве, правее картинок, меняете на свои


Часовой пояс GMT +3, время: 04:18.